CSS背景毛玻璃效果

这里有两点需要注意，由于伪元素不能通过 width:100% 和 height:100% 来继承宿主元素的尺寸，所以通过上述方式来继承 content 的尺寸；

为了使伪元素位于 content 的下面这里给其设置 z-index:-1，为不使其隐藏到背景图的后面，这里给 content 设置 z-index:1。

body::before {
    background: url('/xxx.jpg') 50% / cover no-repeat fixed;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    filter: blur(10px);
    -webkit-filter:blur(10px);
    -moz-filter:blur(10px);
    -ms-filter:blur(10px);
    -o-filter:blur(10px);
    margin: -20px;
    z-index: -1;
}