https://www.jianshu.com/p/adbad9ec6003
作者:我的天气很好啦
链接:https://www.jianshu.com/p/adbad9ec6003
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
filter属性会使整个div的后代模糊并且还会出现白边,如果想让div里的子元素不模糊,,怎么办呢?可以使用伪元素,既解决了模糊问题,也解决了白边问题。
实现思路:
在父容器中设置背景,并且使用相对定位,方便伪元素重叠;在:after中只需要继承背景,并且设置模糊,绝对定位覆盖父元素即可,这样父容器中的子元素便可不受模糊度影响。因为伪元素的模糊度不能被父元素的子代继承。
代码如下:
html
<div class="bg">
<div class="drag">like window</div>
</div>
css
.bg{
with:100%;
hight:100%;
position:relative;
background:url("picture") no-repeat fixed;
padding:1px;
box-sizing:border-box;
z-index:1;
}
.bg:after{
content:"";
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:inherit;
filter:blur(2px);
z-index:2;
}
.drag{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:200px;
height:200px;
text-align:center;
z-index:11;
}