css实现毛玻璃的效果

概述

前段时间在开发公司项目时，需要使用到如下图所示特效，我们先来分析一下这张图，背景是一张清晰的图片，然后最左侧就像是盖了一层毛玻璃，透过这块玻璃看背景图片给人呈现出一种隐隐约约模糊的视觉效果。初看这种效果时，我们不能想当然的以为只是在背景上面盖了一块有透明度的白色区块，纯粹的透明度是不会出现这种模糊的效果，那如图效果该如何实现呢？感兴趣的看官请继续往下读。

初识Filter（滤镜）属性

1、作用： 用于调整图像，背景和边框的渲染

2、兼容写法：

• filter: xxx;
• -webkit-filter: xxx;

3、滤镜函数

• url()
• blur() 设置高斯模糊，值越大越模糊
• brightness() 默认是1，调整图片亮度，100%->0% 值越小越暗,为0%时全黑；100%是临界点，图片不发生变化，超过100%，值越大越亮；
• contrast 调整对比度 默认为1，100%是临界点，图片不发生变化，0%为全黑，超过100%值
• drop-shadow(offset-x[必须], offset-y[必须], blur-radius[可选], color[可选]) 给图像设置一个阴影效果，参数分别为x偏移量，y偏移量，模糊半径，阴影颜色。
• grayscale() 将图片转化为灰度图像
• hue-rotate() 给图像进行色相旋转。0度时图片无变化
• invert() 反转输入图像。默认是0，图片无变化，取值为0-100%，100%为完全反转。
• opacity() 转化图片的透明程度，0% 完全透明，100% 图像无变化。
• saturate() 转化图像饱和度。0% -> 完全不饱和， 100% -> 图像无变化。超过100% -> 更高的饱和度。
• sepia() 将图片转换为褐色。 默认为0，取值为0-100%；为0时图像无变化，为100%时完全是深褐色的。

使用filter:blur 实现毛玻璃特效

想当然的误入歧途

错误案例1：

首先我们初步分析下结构应该是怎样的？

• 一个主容器
• 存放图片的容器
• 左侧那块模糊遮罩

嗯，那对应的结构应该就是如下了：

<div class="wrap">
    <img src="./images/omni.jpg" alt="">
    <i></i>
</div> 

那样式该怎样写呢？

初步设想: 给左侧的遮罩来一个绝对定位，盖在背景图片上面，然后遮罩的背景为白色，设置filter属性，指定blur模糊半径值以及opacity的值，这样能否透过这个遮罩呈现一个模糊的效果呢？说做就做，请看下方代码:

html结构：
 <div class="wrap">
     <img src="./images/omni.jpg" alt="">
     <i></i>
 </div>

css样式：
     .wrap {
         margin: 100px auto;
         width: 750px;
         height: 400px;
         position: relative;
         overflow: hidden;
     }
     img {
         width: 100%;
         height: auto;
         display: block;
     }
     i {
         position: absolute;
         width: 400px;
         height: 400px;
         z-index: 3;
         top: 0;
         left: 0;
         background: #fff;
         filter: opacity(.8) blur(5px);
     } 

保存查看一下，浏览器运行效果如下：

咦，对比下和我们期望的样子，好像差了不止一点点啊！那我们究竟是错在哪儿了，我们再回过头来分析下这个例子，首先filter:blur()是让定义的元素起作用，在这里，我们将filter:blur()定义在左侧遮罩上面了，所以导致了遮罩呈现模糊效果，但是背景不模糊的现象，但是我们实际想要的效果是让背景图片的左侧部分模糊。那我们怎么去修正它呢？或者说filter:blur应该定义在哪里呢？

错误案例2：

上述的错误案例让我们意识到，什么元素需要模糊就把filter:blur设置到这个元素上去，而不是想当然的设置一个遮罩，那既然如此，我们是否应该把filter:blur设置到背景图片上去呢？那就试试看吧！

html:
    <div class="wrap">
        <img src="./images/omni.jpg" alt="">
        <i></i>
    </div>

css:
    .wrap {
        margin: 100px auto;
        width: 750px;
        height: 400px;
        position: relative;
        overflow: hidden;
    }
    img {
        width: 100%;
        height: auto;
        display: block;
        filter: blur(5px)
    }
    i {
        position: absolute;
        width: 400px;
        height: 400px;
        z-index: 3;
        top: 0;
        left: 0;
        background: #fff;
        opacity: .5;
    }

保存一下运行，结果如下:

很遗憾，依旧不是我们期待的样子，因为我们将filter:blur()直接设置到背景图片上面，所以导致整张背景图片都是模糊的了。

正确的使用filter:blur

上述的经验告诉我们直接将filter:blur()设置到背景图片上面是行不通的，无法保证一边模糊一边清晰，肯定需要分两个块做，一个块不做处理，用来展示图片，一个块用来存放模糊的区域，这让我们忍不住想起background属性，更加惊喜的想到background的cover属性，接下来思路就清晰了：

• 用一个容器存放背景图片，不做任何处理
• 遮罩容器固定宽高，使用absolute定位固定在背景图片的左侧，同时遮罩容器也用背景图片做背景，设置background-position:left center,然后设置高斯模糊，让遮罩上模糊的区域和背景容器右侧部分连贯起来，形成一张图片左侧模糊右侧清晰的视觉效果。

html:
    <div class="wrap">
        <div class="img-box"></div>
        <i></i>
    </div>

css:
    .wrap {
        margin: 100px auto;
        width: 750px;
        height: 400px;
        position: relative;
    }
    .img-box {
        width: 750px;
        height: 400px;
        background: url('./images/omni.jpg') no-repeat center center /auto 100%;
    }
    i {
        position: absolute;
        width: 350px;
        height: 400px;
        background: url('./images/omni.jpg') no-repeat left center / cover;
        z-index: 3;
        top: 0;
        left: 0;
        filter: blur(5px);
    }   

效果如下：

看起来好像还不错，一边模糊一边清晰，不过模糊区域好像有些溢出了，那就我们就给主容器设置溢出隐藏嘛

html:
<div class="wrap">
    <div class="img-box"></div>
    <i></i>
</div>

css:
.wrap {
    margin: 100px auto;
    width: 750px;
    height: 400px;
    position: relative;
    overflow: hidden;
}
.img-box {
    width: 750px;
    height: 400px;
    background: url('./images/omni.jpg') no-repeat center center / 100% auto;
}
i {
    position: absolute;
    width: 350px;
    height: 400px;
    background: url('./images/omni.jpg') no-repeat left center / cover;
    z-index: 3;
    top: 0;
    left: 0;
    filter: blur(5px);
} 

效果如下：

这下看起来很不错哦，不过貌似还需要做最后一步哦，做一个白色透明层放在模糊区域上面，让效果变得更加明显

 html: 
 <div class="wrap">
    <div class="img-box"></div>
    <i></i>
    <span></span>
</div>   

 css:

 .wrap {
     margin: 100px auto;
     width: 750px;
     height: 400px;
     position: relative;
     overflow: hidden;
 }
 .img-box {
     width: 750px;
     height: 400px;
     background: url('./images/omni.jpg') no-repeat center center / 100% auto;
 }

 i {
     position: absolute;
     width: 350px;
     height: 400px;
     background: url('./images/omni.jpg') no-repeat left center / cover;
     z-index: 3;
     top: 0;
     left: 0;
     filter: blur(10px);
 }
 span {
     position: absolute;
     width: 350px;
     height: 400px;  
     z-index: 5;
     top: 0;
     left: 0;
     background: #fff;
     opacity: .2;
 }     

效果如下：

这样看起来完全没有问题了哦，效果是不是棒棒哒？