CSS：backdrop-filter实现毛玻璃的效果

本文主要是介绍CSS：backdrop-filter实现毛玻璃的效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现效果

实现代码

/* 关键属性 */
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

完整代码

<style>/* 遮罩层 */.mo-mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;background-color: #1e80ff;}.mo-dialog {border-radius: 16px;height: 400px;width: 600px;margin: 100px auto;/* 关键属性 */background-color: rgba(255, 255, 255, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}</style><div class="mo-mask"><div class="mo-dialog"></div></div>

参考文章

• 前端笔记 - 【CSS】 - filter 于 backdrop-filter

这篇关于CSS：backdrop-filter实现毛玻璃的效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---