问题
I have the following code.
I need to have it all blurred except the red div in the center.
I tried using filter:none
or filter:blur(0)
but that don't work. How can I blur everything in the background except the red div?
edit: I tried using it with z-index too, that does not work either.
.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>
回答1:
You should use not for this.
If you use .container div:not(.center)
your problem should be solved.
.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>
回答2:
Can add one more sub div and add blur to it. I did it. Its working to my code.
.container{
width:100%;
height:100%;
min-height:400px;
position:relative;
}
.subcontainer{
filter: blur(0.5rem);
}
.text{
width:50%;
}
.center{
width:200px;
height:200px;
position:absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
background:#f00;
//filter: blur(0);
//filter: none;
}
<div class="container">
<div class="subcontainer">
<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>
<div class="center"></div>
</div>
回答3:
Here is finally a case where the selector * can be useful:
body * {filter:blur(8px);}
.center {filter:none;}
I had to move the red div out of the container
body * {filter:blur(8px);}
.center {filter:none;}
.container{
width:100%;
height:100%;
min-height:400px;
position:relative;
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: 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>
<div class="center"></div>
回答4:
Try adding blur effect only to the inner elements instead of the parent element ("container" class). Below CSS must work:
.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;
}
来源:https://stackoverflow.com/questions/60018959/blur-the-whole-page-except-a-div