如何在CSS

Question

我想创建一个网站，每个网页上都有一个横幅，图片上有灰色叠加层。这样，图像上的白色文字变得更加明显。 结果应如下所示：http://skoopopweg.weebly.com/programma.html。

我找到了使图像变暗的方法，但没有在其上面叠加图层。 有人可以帮忙吗？

到目前为止，这是我在此类图像中的CSS代码：

.img-with-overlay{width:100%; position:relative;}

在html中：

<img class="img-with-overlay" src="img1.jpg" />

Answer 1

这个想法：

• 使用div作为position: relative
的包装器
• 使用div作为position: absolute和background-color的叠加层（您可以更改前3个值以设置RGB颜色，将4rth更改为不透明度级别）

.img-wrapper {
  position: relative;
  width: 100%;
  font-size: 0;
}

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128,128,128,0.5);
}

.img-wrapper img {width: 100%;}

<div class="img-wrapper">
  <div class="img-overlay"></div>
  <img src="http://lorempixel.com/output/city-q-c-640-480-6.jpg">
</div>

Answer 2

＆＃13;

＆＃13;

.image_div{
  width:100px;
  height:100px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.image_div img{
  max-width:100%;
  max-height:100%;
}

.image_div .img_overlay{
  position:absolute;
  top:0;
  left:0;
  height:0;
  bottom:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
}

＆＃13;

<div class="image_div">
  <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg">
  <div class="img_overlay">
  
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是JSFiddle

这与您正在寻找的相同吗？

希望这有帮助。

Answer 3

我发现这很好用。

#your-img-id {
   filter: brightness(30%);
}

对于此用例而言，灵活性不高，但非常简单。