所以我有一個圖像。我需要在此圖片的頂部放置一個顏色覆蓋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;
}
.home img {
width: 100%;
padding: 0;
margin: 0;
}
<div class="home">
<img src="~/Images/plant.png" />
</div>在這裏你去
.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>爲什麼添加另一個div？如果你可以使用'家'div？ –
由於家庭可能用於每個內容... – RacoonOnMoon
@MihaiT他的假設是正確的，在家裏還會有一些其他的內容。當然，兩個答案都是正確的，但特拉弗爾更適合我的案例。 –
您可以在圖像上使用僞元素如before及絕對位置它
加入了藍色背景色示例的目的，這樣可以更好地看到它，但你可以使用任何顏色與透明度
img {
width: 100%;
padding: 0;
margin: 0;
}
.home {
\t 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>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);
}
}
換個格在'.home'格，使其成爲相同的大小和與顏色（使用'Z-index'填充它，如果你必須） – marcellothearcane
檢查了這一點：https://stackoverflow.com/questions/18815157/how-to-overlay-image-with-color-in-css – anonymous