毛玻璃

毛玻璃的模糊技术之前一直都做不好，但今天终于懂了，毛玻璃的制作只需用到filter的blur属性，但需要注意细节

D35F316E-A794-4DBB-8747-6F2CA8D5ACC0.png

将上图做成毛玻璃效果，如果直接将content使用(filter)的blur();
则会出现下面的效果

.content{
        filter:blur(5px);
}

FA3F1B5E-387A-47ED-91A2-302D81690758.png

通过上面的案例知道，直接给content设blur是不可行的，因此要多使用一层元素，但并不是要多设一个元素，可以通过使用为元素的方式

.content{
         z-index:1;   
}
.content:after{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
        background-color:rgba(255,255,255,0.8);
        z-index:-1;
}

C9D591A0-1A0C-4DE5-AC8A-0B6F7ECBC0F4.png

将content的层级提高的目地是为了让伪元素将其遮盖起来，另外不能通过width:100%和height:100%来继承父级的宽高,但这样做仍然可以看到content周围有模糊的边，因此我们可以对content使用overflow：hidden的操作

为了使图片看起来像从后面的图片，可以将伪元素里的背景更改为与背景图一样的图片

.content:after{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(img/003.jpg);
    background-position: center top;
    background-size: cover;
    filter: blur(3px);
    z-index: -1;
}

40131FB4-C459-469A-A3F9-15B9FE135A22.png