我在 div 中有一個背景影像，我希望能夠在背景影像的頂部放置另一個具有較低不透明度的黑框，以便您可以看穿它并使影像變暗。
uj5u.com熱心網友回復：
您可以z-index在容器中的影像上使用它，通過為其提供 -1 的 z-index 和父級的 z-index 1將其推到后面div以充當 a background-image。然后將其定位為絕對位置并使用它來填充整個家長。
下面是一個實作：
**我的index.html**
<div class="container">
<div class="content">
<img src="./images/img.jpg" alt="">
<h1>My content</h1>
</div>
</div>
**我的style.css**
.container {
position: relative;
display: grid;
place-content: center;
z-index: 1;
}
.container .content {
width: 100%;
height: 100%;
background-color: #00000052;
}
.container img {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
uj5u.com熱心網友回復：
實作此效果的最簡單方法是直接在影像上應用CSS 亮度過濾器。
您當然可以使用絕對/相對定位和 z-index 將兩個 div 堆疊在一起，但這些會產生其他問題，并且需要您撰寫更多代碼以降低性能。
.dark {
filter: brightness(40%);
}<img src="https://randomuser.me/api/portraits/women/68.jpg" width="200" height="200" alt="" />
<img class="dark" src="https://randomuser.me/api/portraits/women/68.jpg" width="200" height="200" alt="" />轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/328497.html
上一篇：設定網格列始終為100%