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

Question

所以我有一张照片。我需要在此图片的顶部放置一个颜色叠加rgba(56, 59, 64, 0.7)。

HTML：

<div class="home">
   <img src="~/Images/plant.png" />
</div>

CSS：

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

＆＃13;

＆＃13;

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

＆＃13;

<div class="home">
   <img src="~/Images/plant.png" />
</div>

＆＃13;

＆＃13;

＆＃13;

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>

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>

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);
    }
}