删除在儿童元素的迷离作用 [英] remove blur effect on child element
本文介绍了删除在儿童元素的迷离作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个具有模糊效果的背景图片的< div>
。
I have a <div>
with an background-image with blur effect.
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
唯一的问题是所有的Child元素也得到模糊效果。是否有可能摆脱对所有子元素的模糊效果?
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;
}
推荐答案
在内容和内容中创建div给出bg图像&模糊效果。 &给它z-index减去不透明度div,这样的东西。
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 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>
使用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;
}
这篇关于删除在儿童元素的迷离作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文