JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量

前言

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

具体实现

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

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

首夏犹清和，芳草亦未歇。
 
1
2

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/q