实现div毛玻璃背景-白红宇

毛玻璃效果

ios里毛玻璃效果的使用非常多，本文介绍一个实现div毛玻璃背景的方法

CSS3 Filter

CSS3的Filter主要用在图像的特效处理上，默认值为none，还有以下备选项：

1.grayscale灰度

2.sepia褐色

3.saturate饱和度

4.hue-rotate色相旋转

5.invert反色

6.opacity透明度

7.brightness亮度

8.contrast对比度

9.blur模糊

10.drop-shadow阴影

每一种效果大家可以自己试试，考虑一下可以用在哪些方面，

这里仅仅用到了其中的blur，帮助实现高斯模糊的效果。

兼容性我试了一下最新的火狐和Chrome效果都是可以的，IE不用说了…

filter:blur()

参数默认是0，单位px，不接受%，参数值的大小表示屏幕上以多少像素融在一起，所以值越大越模糊。

：before()

:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。

用它来添加模糊背景，具体用法可以看我另外一篇?:before和:after

rgba()

毛玻璃背景上文字内容显示效果并不理想，无论字体颜色深或浅，看着总是怪怪的…因此还需要加上一层带色的半透明背景，一般是黑色，或白色。

示例：

这里写图片描述

整体通过三层重叠实现，

最下面是模糊层.blur_box:before，设置z-index: -2。

中间是rgba层.rgba，设置z-index: -1。

最上面是内容层.blur_box，设置z-index: 0。

代码如下：

  
       毛玻璃效果
         
            
       
             
               
        haha
        
        texttexttexttexttexttexttexttexttext
        
        texttexttexttexttexttexttexttexttext
        
        texttexttexttexttexttexttexttexttext
        
        texttexttexttexttexttexttexttexttext
        
        texttexttexttexttexttexttexttexttext
        
        texttexttexttexttexttexttexttexttext

注释已经写的很详细了，但有一点还是得单独说一下。因为blur()产生的模糊效果当值越大时，就会有越宽的边缘渐变过渡，为了消除(实际上只是让它看不见)，我将模糊层的宽度和高度都变大，再通过top和left负值调整位置。

.blur_box:before{  content: "";  position: absolute;  width:300%;/* 模糊层的宽度和高度都变大 */  height:300%;  left: -100%;/* 回调模糊层位置 */  top: -100%;  background:url(1.jpg) no-repeat center center fixed;   filter: blur(20px);  z-index: -2;}

其中.rgba也可改为白色半透明background-color: rgba(255,255,255,0.2);，完全取决于自己，然后相应改变内容的字色。blur()的参数也可以根据自己爱好试着改变出想要的效果。