时间戳

首页 > 解决方案 > 为图像添加黑色透明度

html - 为图像添加黑色透明度

问题描述

这是我的网页的样子： 在此处输入图像描述

我使用以下图像作为背景： 在此处输入图像描述

我怎样才能在图像上有黑色透明覆盖，所以它看起来像下面这样： 在此处输入图像描述

这是我的 html 和 CSS 代码：

<!DOCTYPE html>
<html>
   <head>
       <title>Background Image</title>
       <meta charset="utf-8"></meta>
       <meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>

   <style type="text/css">
    body{
    margin-top: 53px;
    }

    .jumbotron {
    background-image: url("background1.jpg");
    text-align: center;
    height:522px;
    background-size: cover;
    }

   </style>

   <body>                 
    <section id="page-top">
            <div class="jumbotron">
              <p data-aos="zoom-out" data-aos-delay="500" style="font: 120px Verdana,sans-serif; margin-top: 35px; color: black; animation-duration: 2s; animation-iteration-count:infinite; animation-delay: 1s;" class="lead pulse mb-5 green pb-5 aos-init aos-animate">Matt Williams</p>
              <p data-aos="zoom-out" data-aos-delay="500" style="font: 20px Georgia,serif;font-style:italic; line-height: 1.6; color:white;animation-duration:2s;animation-iteration-count:infinite; animation-delay:1s;" class="lead pulse mb-5 lightGreen pb-5 aos-init aos-animate d-none d-lg-block">Lorem Ipsum.<br>Lorem Ipsum.</p>
            </div>
        </section>
   </body>
</html>

标签： htmlcssfrontend

解决方案

您可以在 url 背景前添加透明渐变：

.jumbotron {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("background1.jpg");
}

例如：

body {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://picsum.photos/id/896/640/480);
}

推荐阅读