让背景出现毛玻璃的效果

一 .最近做一个项目，UI的一个需求是：

1.背景是半透明的
2.背景有毛玻璃的模糊效果
3.上面的字体清晰可见
效果如下：

二 . 我说这个简单，不就是背景用blur处理一下嘛，简单。

先是背景透明，字体清晰可见

div{
  background:rgba(51, 51, 51, .6);
}

再来个模糊处理

div{
  background:rgba(51, 51, 51, .6);
  -webkit-filter: blur(10px);
   -moz-filter: blur(10px);
    -ms-filter: blur(10px);    
        filter: blur(10px);
}

还做了兼容处理，美滋滋。
打开浏览器刷新：

我擦，这都是什么鬼。不行，要分析一下。

原来div里面的字和div是在一个盒子里面，设置这个盒子为模糊，那么里面的字一起都会被设为模糊。所以，我们可以通过以下方法：

要设置模糊背景的地方通过伪元素设置背景颜色，区域relative定位，伪元素absolute定位，这样让伪元素的大小完全等于本来区域的大小 然后用blur滤镜进行模糊处理，再设置伪元素z-index为 -1，置于最底层，就OK啦。

div{
   position: relative;
  background:rgba(51, 51, 51, .6);
  -webkit-filter: blur(10px);
   -moz-filter: blur(10px);
    -ms-filter: blur(10px);    
        filter: blur(10px);
}
div::before {
    position: absolute;
    z-index: -1;
    background:rgba(51, 51, 51, .6);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    filter: blur(10px);
 }

这样 就得到了第一张图的效果。

感谢他的思路。