我有以下代码。
除了中心的红色 div 之外，我需要将所有内容都模糊化。
我尝试使用filter:none or filter:blur(0)但这行不通。如何模糊背景中除红色 div 之外的所有内容？
编辑：我也尝试将它与 z-index 一起使用，但这也不起作用。
.container{
width:100%;
height:100%;
min-height:400px;
position:relative;
filter: blur(0.5rem);
z-index:1;
}
.text{
width:50%;
}
.center{
width:200px;
height:200px;
position:absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
background:#f00;
z-index:10;
filter: blur(0);
filter: none;
}
<div class="container">
<div class="title">
<h1>
some text
</h1>
</div>
<div class="text">
<p>
some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...
</p>
</div>
<div class="center"></div>
</div>
你应该使用not https://developer.mozilla.org/en-US/docs/Web/CSS/:not为了这。
如果你使用.container div:not(.center)你的问题应该得到解决。
.container div:not(.center){
width:100%;
height:100%;
min-height:400px;
position:relative;
filter: blur(0.5rem);
z-index:1;
}
.text{
width:50%;
}
.center{
width:200px;
height:200px;
position:absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
background:#f00;
z-index:10;
filter: blur(0);
filter: none;
}
<div class="container">
<div class="title">
<h1>
some text
</h1>
</div>
<div class="text">
<p>
some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...
</p>
</div>
<div class="center"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
