我想在 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 关注
- 87 浏览
添加回答
举报
0/150
提交
取消