如何模糊(css) div 没有模糊子元素

.content {
float: left;
width: 100%;
background-image: url('images/zwemmen.png');
height: 501px;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}


.opacity {
background-color: rgba(5, 98, 127, 0.9);
height: 100%;
overflow: hidden;
}


.info {
float: left;
margin: 100px 0px 0px 30px;
width: 410px;
}
<div class="content">
<div class="opacity">
<div class="image">
<img src="images/zwemmen.png" alt="" />
</div>
<div class="info">
a div wih all sort of information
</div>
</div>
</div>

如果我不想模糊按钮，我需要做什么？

84866 次浏览
小开

When using the blur or opacity property, it is not possible to ignore the child element. If you apply either of those properties to parent element, it will automatically apply to child elements too.

There is an alternate solution: create two elements inside your parent div – one div for the background and another div for the contents. Set position:relative on the parent div and set position:absolute; top:0px; right:0px; bottom:0px; left:0px; (or set height/width to 100%) to the child element for the background. Using this method, the content div will not be affected by properties on the background.

Example:

#parent_div {
position: relative;
height: 100px;
width: 100px;
}


#background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
filter: blur(3px);
z-index: -1;
}
<div id="parent_div">
<div id="background"></div>
<div id="textarea">My Text</div>
</div>

If you see the background masking over the content, then use the z-index property to send the background behind the second content div.

小开

Just create two divisions and adjust their z-indexes and margins such that the division you want to blur lies below the division you want to appear on top.

PS: Don't create division inside a division cause the child inherits the parent's properties. 

#forblur {
height: 200px;
width: 200px;
background-color: blue;
margin: auto;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px) -ms-filter: blur(3px);
filter: blur(3px);
z-index: -1;
}


#on-top-container {
margin: auto;
margin-top: -200px;
text-align: center;
height: 200px;
width: 200px;
z-index: 10;
}
<div id="forblur">
</div>
<div id="on-top-container">
<p>TEXT</p>
</div>

小开
最佳答案

How to disable blur on child element?

.enableBlur>* {
filter: blur(1.2px);
}


.disableBlur {
filter: blur(0);
}
<div class="enableBlur">
<hr>
qqqqq<br>
<span>qqqqq</span><br>
<hr  class="disableBlur">
<div>aaaaa</div>
<div>bbbbb</div>
<div class="disableBlur">DDDDD</div>
<hr>
<img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
<img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
</div>

小开

My solution seems a bit simpler but may have some compatibility issues. I just used backdrop-filter with the blur filter.

backdrop-filter: blur(2px);

提交答案