CSS技巧收集——毛玻璃效果

核心代码

.content {
    background-position: center top;
    background-size: cover;
}
.content::after {
    background-image: url(xxx.jpg);
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);
}

美中不足的是在元素的边缘模糊的效果减弱了，解决办法

.content {
　　overflow: hidden;
}
.content::after {
　　margin: -30px;
}