前言

近日无意间透过装了热水之后，散发出水蒸气的透明水杯看东西时，发现看到的东西呈现模糊效果，这种效果和毛玻璃效果类似。毛玻璃效果在web、手机系统上也有很多应用，如网页上的广告弹窗，手机系统的消息通知界面等等。如下效果：

具体实现

今天用css简单实现下毛玻璃效果，主要使用了backdrop-filter属性。

1.body设置flex布局，让其中具有毛玻璃效果的元素水平居中显示，该元素里面还包裹了诗句元素，增加效果对比。并且给body添加一张背景图片，铺满整个屏幕，超出设置隐藏

<div class="frosted-glass"><h2 class="title">首夏犹清和，芳草亦未歇。</h2>
</div> 

body {display: flex;justify-content: center;align-items: center;width: 100%;height: 100vh;background-image: url(https://img.zcool.cn/community/031roebkxvm4bjwma3rbdfd3835.png?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/format,webp/quality,q_100);background-repeat: no-repeat;background-size: cover;background-position: center;overflow: hidden;
} 

2.给具有毛玻璃效果的元素添加backdrop-filter属性，设置属性值 滤镜函数值blur()为10px，该数值越大越模糊，单位不接受百分比值。并在鼠标移入该元素时，加了一个hover效果，让该元素更为醒目。

backdrop-filter 属性作用于元素后面的区域，添加图形效果（如模糊或颜色偏移）。为了实现效果，必须使元素或其背景至少部分透明。简单来说就是添加该属性的元素背景模糊

.frosted-glass {width: 55vw;height: 32vh;display: flex;align-items: center;justify-content: center;background-color: rgba(255, 255, 255, 0.1);border-radius: 20px;backdrop-filter: blur(10px);transition: 0.5s ease;
}
.frosted-glass:hover {box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1),0 1.7px 2.6px rgba(0, 0, 0, 0.2),0 3.5px 5.3px rgba(0, 0, 0, 0.3),0 7.3px 11px rgba(0, 0, 0, 0.4), 0 20px 30px rgba(0, 0, 0, 0.5);
} 

引申知识点：

filter 属性应用于元素，添加模糊或颜色偏移等图形效果。通常用于图片做高斯模糊滤镜效果。

backdrop-filter 与 filter 非常类似，可以取的值都是一样的，都可以写出高斯模糊的效果，只是作用的目标不一样。

代码块

具体的效果展示如下：

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取