我有以下代码。
除了中间的红色div外,我都需要将其全部模糊。
我尝试使用filter:none
或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>
尝试仅将模糊效果添加到内部元素而不是父元素(“容器”类)。下面的CSS必须起作用:
.container{
width:100%;
height:100%;
min-height:400px;
position:relative;
}
.title {
filter: blur(8px);
-webkit-filter: blur(8px);
}
.text{
width:50%;
filter: blur(8px);
-webkit-filter: blur(8px);
}
.center{
width:200px;
height:200px;
position:absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
background:#f00;
}