我有<div>
,背景图片有模糊效果。
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
唯一的问题是所有的Child元素也会获得模糊效果。是否有可能摆脱对所有子元素的模糊效果?
<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;
}
答案 0 :(得分:13)
在内容和内容中创建一个div给bg图像&amp;模糊效果。 &安培;给它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>
使用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;
}
答案 1 :(得分:0)
添加如下所示的叠加层:
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(2px) sepia(50%);
z-index: 9999999999999999999;
}
那么:
QGraphicsView
在这里,父子关系并不重要。 z-index 很重要。
它将过滤器应用于位于 div 后面的任何内容。