【每日记录】震惊！我居然看不出毛玻璃效果的区别！！有效代码设置透明度，并设置背景模糊程度，backdrop-filte

有效代码

设置透明度，并设置背景模糊程度，backdrop-filter作用于当前元素后面的背景。

background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(15px);

不知道搞哪样！使用opacity: 0.7;设置透明度无法和backdrop-filter: blur()配合产生毛玻璃效果！！一定要使用rgba，不李姐~~~啊不李姐~~~

效果实现

<body>
     <div id="box">
        <div>
            <h1>无效果!!!</h1>
         </div>
         <div>
            <h1>毛玻璃效果!!!</h1>
         </div>
     </div>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #box{
            background: url(http://p0.qhimg.com/bdr/__85/t01a3d15d1c3eb047aa.jpg);
            background-size: 100%;
            width: 100%;
            height: 100vh;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        #box div{
            width: 500px;
            height: 300px;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 10px;
            text-align: center;
            line-height: 300px;
            border-radius: 30px;
        }
        #box div:nth-child(2){
            backdrop-filter: blur(15px);
        }
    </style>
</body>

效果

毛玻璃效果.jpg