实现效果
实现代码
/* 关键属性 */
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
