Z-index 过滤器影响具有较高 z-index 的内容
我想在 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
慕斯7096541回答
-
绝地无双
您应该删除不透明度并使用 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>
随时随地看视频慕课网APP
相关分类
Html5