微信小程序伪类---解决背景图片模糊，文字不模糊

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;
}