Html 如何在不模糊子元素的情况下模糊（css）div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28975673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to blur(css) div without blur child element
提问by ggoha
.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>If I do not want to blur the button, what do I need to do?
如果我不想模糊按钮，我需要做什么？
采纳答案by qwabra
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>回答by Ashish Panwar
When using the bluror opacityproperty, 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.
使用bluroropacity属性时，不能忽略子元素。如果将这些属性中的任何一个应用于父元素，它也会自动应用于子元素。
There is an alternate solution: create two elements inside your parent div– one divfor the background and another divfor the contents. Set position:relativeon the parent divand 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 divwill not be affected by properties on the background.
有一个替代解决方案：在你的父元素中创建两个元素div——一个div用于背景，另一个div用于内容。设置position:relative在父div和组position:absolute; top:0px; right:0px; bottom:0px; left:0px;（或一套高度/宽度为100％），为背景的子元素。使用这种方法，内容div不会受到背景属性的影响。
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-indexpropertyto send the background behind the second content div.
如果您在内容上看到背景遮罩，则使用该z-index属性将背景发送到第二个内容后面div。
回答by Cyclops Blue
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.
只需创建两个分区并调整它们的 z 索引和边距，使您想要模糊的分区位于您希望出现在顶部的分区下方。
PS: Don't create division inside a division cause the child inherits the parent's properties.
PS：不要在部门内创建部门，因为孩子会继承父母的属性。
#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>