本篇文章给大家带来的内容是关于纯CSS实现底层毛玻璃效果（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
毛玻璃背景是一个很常见的网页样式，想要实现，其实并不难，但经过我在网上的搜索发现，大量实现方法都较为不规范，且把问题复杂化了（例如各种z-index属性和position的定位）
现提供一个代码很直白且实现效果良好的实现方案，改良自W3Schools
HTML部分
<!DOCTYPE html><html dir="ltr"> <head> <meta charset="utf-8"> <title>FrostedGlass</title> <link rel="stylesheet" href="frostedGlass.css"> </head> <body> <div> <div> <p>this is FrostedGlass</p> </div> </div> </body></html>
.mainHolder是主框体
.textHolder是毛玻璃区域
.p是浮于毛玻璃上的文字内容
CSS部分
* { box-sizing: border-box;}.mainHolder { width: 600px; height: 600px; background-image: url(https://www.easck.com/d/file/p/2020/07-23/202007231255392213.jpg); background-attachment: fixed; background-position: center; background-size: cover; position: relative;}.textHolder { width: 100%; height: 200px; position: absolute; right: 0; bottom: 0; background: inherit; overflow: hidden;}.textHolder::before { content: ''; position: absolute; top:0; right: 0; bottom: 0; left: 0; background: inherit; background-attachment: fixed; filter: blur(4px);}.textHolder::after { content: ""; position: absolute; top:0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.25);}p { z-index: 1; color: white; position: relative; margin: 0;}解决毛玻璃效果里最核心的问题：模糊效果不能影响字体，采用了伪元素::after于::before
值得注意的是，在p标签里的position属性。设置为relative后，会将p从被遮挡状态“提起来”。
另外，对于不同的浏览器内核，filter的写法会有些许不同。
