本篇文章给大家带来的内容是关于纯css实现底层毛玻璃效果（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
毛玻璃背景是一个很常见的网页样式，想要实现，其实并不难，但经过我在网上的搜索发现，大量实现方法都较为不规范，且把问题复杂化了（例如各种z-index属性和position的定位）
现提供一个代码很直白且实现效果良好的实现方案，改良自W3Schools
HTML部分
FrostedGlass
.mainHolder是主框体
.textHolder是毛玻璃区域
.p是浮于毛玻璃上的文字内容
CSS部分
* { box-sizing: border-box;}.mainHolder { width: 600px; height: 600px; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.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的写法会有些许不同。
以上就是纯CSS实现底层毛玻璃效果（代码示例）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1613621.html
微信扫一扫 
支付宝扫一扫 
