我想在 HTMLCSS 中制作一段內容，其背景圖像上有一個灰色背景（過濾器），這相當簡單，但內容也得到了灰色過濾器，我給所有內容一個相對位置并執行了以下操作：背景：最低 z-index 過濾器：中間 z-index 內容：最高 z-index （在我看來，不應受到中間 z-index 的影響）但事實是：它確實如此，中間 z-index 影響我的最高 z-index索引，我不明白為什么這是我編寫的代碼（示例代碼，因為其他代碼太大）html:<body><div class="filter"> <div class="content"> <h1>Hello Stackoverflow</h1> <p>Please help me view this without the filter effect affecting the content ( this part)</p> </div> </div> </body>CSS：body{ background-image: url('the-doors.jfif'); position: relative; z-index: 1;}.filter{ background-color: grey; opacity: 40%; position: relative; z-index: 2;}.content{ color: green; font-size: 3.0em; position: relative; z-index: 3; }有人可以幫我解釋一下為什么內容也能獲得灰色濾鏡效果，盡管它有更高的 z-index
1 回答
絕地無雙
TA貢獻1946條經驗 獲得超4個贊
您應該刪除不透明度并使用 rgba 顏色來使顏色具有不透明度。
body{
background-image: url('the-doors.jfif');
position: relative;
}
.filter{
position: relative;
background-color:rgba(100,255,255,.5) /* <== Here you should change it */
}
.content{
color: green;
font-size: 3.0em;
position: relative;
}
<div class="filter">
<div class="content">
<h1>Hello Stackoverflow</h1>
<p>Please help me view this without the filter effect affecting the content ( this part)</p>
</div>
</div>
- 1 回答
- 0 關注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消