让背景出现毛玻璃的效果

一 .最近做一个项目,UI的一个需求是:

1.背景是半透明的
2.背景有毛玻璃的模糊效果
3.上面的字体清晰可见
效果如下:
让背景出现毛玻璃的效果_第1张图片

二 . 我说这个简单,不就是背景用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);
}

还做了兼容处理,美滋滋。
打开浏览器刷新:
让背景出现毛玻璃的效果_第2张图片

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

原来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);
 }

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

感谢他的思路。

你可能感兴趣的:(css)