HTML/CSS 实现毛玻璃效果

效果

毛玻璃效果图

实现代码

css主要部分:

* {
    padding: 0;
    margin: 0;
    color: #333;
}
body
, #box::before {
    background-image: url(img/1.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: top center;
}

#box::before
, .center {
    margin: auto;
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;

}

#box {
    width: 550px;
    height: 350px;

    border-radius: 10px;
    padding: 10px;
    box-shadow: -4px 0 4px #0003
        , 0 -4px 4px #0003
        , 4px 0 4px #0003
        , 0 4px 4px #0003;
    background: #FFF4;
    left: auto;
    right: 15%;
}
#box::before {
    content: '';
    display: block;
    z-index: -1;
    width: 100%;
    height: 100%;
    filter: blur(3px);
}

html:

    
    
    
    


    

        
毛玻璃表面不平整，光线通过毛玻璃被反射后向四面八方射出去
            (因为毛玻璃表面不是光滑的平面，使光产生了漫反射)，折射到视网膜上已经是不完整的像，
        于是就看不见玻璃背后的东西了。 当毛玻璃上贴了透明胶布，毛玻璃的表面又变得平整了，
        光线可以完整被反射，所以，在视网膜上又呈现出完整的像，因而，眼睛又能看到物体了。另外，
        用湿布擦毛玻璃也能看清楚。
    

实现思路

通过背景+模糊背景+透明底色实现毛玻璃的效果，主要用到了以下属性

background-size: cover; /* 让图片覆盖整个背景区域 */
background-attachment: fixed;
filter: blur(3px); /* 对背景进行模糊 */
z-index: -1; /* 让模糊层在父元素的最底层显示 */