如何在图像上添加颜色叠加层

Question

所以我有一张图片。我需要在这张图片上叠加一个颜色覆盖层rgba(56, 59, 64, 0.7)。

HTML代码：

<div class="home">
   <img src="http://via.placeholder.com/350x150" />
</div>

CSS：

.home img {
  width: 100%;
  padding: 0;
  margin: 0;
}

.home img {
  width: 100%;
  padding: 0;
  margin: 0;
}
    

<div class="home">
   <img src="http://via.placeholder.com/350x150" />
</div>

- Ali Almohsen

---

在.home div中再放一个div，使其大小相同并填充相同的颜色（如果必要，使用z-index）。 - marcellothearcane

请查看以下内容：https://dev59.com/JGMk5IYBdhLWcg3w8ieC - anonymous

Answer 1

这里有您需要的内容

.home {

}

img {
  width: 100%;
  padding: 0;
  margin: 0;
  display:block;
}

.wrap {
  position:relative;
}

.wrap:before {
  content:"";
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: rgba(0,0,0,0.5);
  z-index:999;
}

<div class="home">
<div class="wrap">
   <img src="http://via.placeholder.com/350x150" />
 </div>
</div>

- RacoonOnMoon

---

为什么要添加另一个div？如果可以使用“home” div，为什么不用呢？ - Mihai T

@MihaiT 的假设是正确的，主页上会有其他内容。虽然两个答案都是正确的，但 Traver 的更符合我的情况。 - Ali Almohsen

@AliAlmohsen 如果是这样的话，你应该在问题中提供这些信息：）。我们（至少我不会）没有水晶球来知道您的HTML结构中发生了什么。 - Mihai T

Answer 2

你可以使用伪元素比如before，绝对定位在图片上方。为了举例说明，添加了一个蓝色背景颜色，以便你更好地看到它，但你也可以使用带有不透明度的任何颜色。

img {
  width: 100%;
  padding: 0;
  margin: 0;
}
.home {
 position:relative;
}
.home:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,255,0.5);
}

<div class="home">
  <img src="http://via.placeholder.com/350x150">
</div>

- Mihai T

Answer 3

HTML

    <div class="home">
       <img src="mango.jpg" />
        <div class="overlay"></div>
    </div>

SCSS

.home {
    position: relative;
    img {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(56, 59, 64, 0.7);
    }
}

- Mr.Pandya