css-毛玻璃效果

主要点：backdrop-filter: blur(15px);

效果：

image.png

代码：

<style>
        #box{
            width: 1500px;
            height: 840px;
            margin: 10px auto;
            /* 图片从百度上复制的 */            
            background:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.souutu.com%2F2020%2F0318%2F20200318070702868.jpg&refer=http%3A%2F%2Fimg.souutu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652408450&t=7bb00b26c9b8c7e895cd50da786dbdad");
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #conent{
            width: 50%;
            height: 50%;
            background-color: rgba(255,255,255,.1);
            background-size: 100% 100%;
            backdrop-filter: blur(15px);
            box-shadow: 0 0 10px rgb(93, 93, 93);
            border-radius: 15px;
        }
        h2{
            text-align: center;
            color: white;
        }
    </style>
    <div id="box">
        <div id="conent">
            <h2>这是毛玻璃效果</h2>
        </div>
    </div>

项目中有次使用到没有直接写出来，特此记录。