Html 去除子元素上的模糊效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22406478/
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
remove blur effect on child element
提问by Robert Verkerk
I have a <div>with an background-image with blur effect.
我有一个<div>带有模糊效果的背景图像。
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
The only problem is that all the Child elements also get the blur effect. Is it possible to get rid of the blur effect on all the child elements??
唯一的问题是所有子元素也获得了模糊效果。是否可以消除所有子元素上的模糊效果？
<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>
.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;
}
采纳答案by demonofthemist
Create a div inside content & give bg image & blur effect to it. & give it z-index less the the opacity div, something like this.
在内容中创建一个 div 并为其提供背景图像和模糊效果。& 给它 z-index 减去不透明度 div，就像这样。
<div class="content">
<div class="overlay"></div>
<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>
Use Css
使用 CSS
.content{
float: left;
width: 100%;
}
.content .overlay{
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);
z-index:0;
}
.opacity{
background-color: rgba(5,98,127,0.9);
height:100%;
overflow:hidden;
position:relative;
z-index:10;
}
