🌈 一、前言
在现代网页设计中，"毛玻璃（Frosted Glass）"效果几乎是高端 UI 的标配。
无论是登录弹窗、信息卡片、还是仪表盘背景，它都能带来优雅的层次感与视觉柔化效果。
本篇文章将通过 纯 CSS 实现毛玻璃模糊背景特效 ，无需任何 JavaScript，也不依赖额外库。
代码短小、兼容性强、效果高级，非常适合前端开发者收藏！
🖼️ 二、效果预览
最终效果如下图所示（可自行运行查看动态效果）：
背景图片清晰，而中间的内容区域呈现半透明模糊的"玻璃"质感，文字浮在上方清晰可见。
🧩 三、完整源码（可直接复制运行）
以下是完整 HTML + CSS 源码，你可以直接复制运行（放在同目录的 image/4.jpg 即可）。
html
<!DOCTYPE html>
<!--RGBA/HSLA颜色-->
<!--把文本层所覆盖的那部分图片区域作模糊处理-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
width: 100%;
height: 100%;
/*垂直水平居中*/
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
body,
main::before {
/*背景图*/
background: url(./image/4.jpg) 0 / cover fixed;
z-index: -2;
}
main {
width: 800px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
position: relative;
background: hsla(0, 0%, 100%, .3);
overflow: hidden;
/*把多余的模糊区域裁切掉*/
}
/*伪元素
由于我们不能直接对元素本身进行模糊处理，就对一个伪元素进行处理，然后将其定位到元素的下层，它的背景将无缝
匹配<body>的背景*/
main::before {
content: '';
position: absolute;
/*所有偏移量置为0，这样将它可以完整地覆盖到<main>元素之上*/
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(20px);
/*让伪元素相对其宿主元素的尺寸再向外扩大至少30px（即它的模糊半径）*/
margin: -30px;
/*background: rgba(255, 0, 0, .5);*/
/*上 右 下 左 */
z-index: -1;
}
</style>
</head>
<body>
<main>
<blockquote>
"The only way to get rid of a temptation is to yield to it .<wbr>
Resist it, and your soul grows sick with longing for the<wbr>
things it has forbidden to itself, with desire for what its<wbr>
monstrous laws have made monstrous and unlawful."
<footer>------
<cite>
Oscar Wilde,
The Picture of Dorian Gray
</cite>
</footer>
</blockquote>
</main>
</body>
</html>🧠 四、实现原理详解
1️⃣ 模糊处理的核心：filter: blur()
filter: blur(20px) 是 CSS 滤镜功能之一，用于对元素内容进行高斯模糊。
但需要注意：
不能直接对主内容进行模糊，否则文字也会变糊。
所以我们引入 伪元素（::before） 来专门负责"模糊背景"，而真正的文字内容在其上层展示。
2️⃣ 为什么使用 main::before？
因为 main 是内容容器，我们无法单独模糊其背景（CSS 目前不支持"仅模糊背景，不影响子元素"）。
于是创建一个伪元素：
css
main::before {
position: absolute;
filter: blur(20px);
z-index: -1;
}这样它会：
-
完全覆盖
main元素； -
背景与
body一致； -
模糊生效；
-
不影响文字层。
3️⃣ 解决模糊边缘的"剪切问题"
模糊效果会向外扩散，如果刚好被容器裁掉，就会产生边缘硬线。
解决方法：扩大伪元素范围，使模糊区域完整：
css
margin: -30px;这里的 30px 通常略大于模糊半径。
4️⃣ 半透明白背景叠加效果
css
background: hsla(0, 0%, 100%, .3);通过 hsla 色彩模型实现半透明白底：
-
hsla(0, 0%, 100%, .3)表示：白色、透明度 30% -
与模糊背景叠加后形成柔和的"玻璃感"
🎨 五、细节优化建议
| 优化项 | 说明 | 示例 |
|---|---|---|
| 边框与阴影 | 增强立体感 | border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.2); |
| 背景过渡 | 模糊动态变化 | transition: filter .3s ease; |
| 主题变量控制 | 支持自定义模糊强度 | --blur-radius: 20px; filter: blur(var(--blur-radius)); |
🧾 六、兼容性与替代方案
现代浏览器（Chrome、Edge、Firefox、Safari）均支持 filter: blur()。
部分 Safari 或移动端也支持更高级的 backdrop-filter：
css
backdrop-filter: blur(20px);如果项目允许，可直接使用该属性获得更自然的玻璃质感。
🧾 七、知识要点总结
| 技术点 | 说明 |
|---|---|
filter: blur() |
高斯模糊滤镜 |
::before 伪元素 |
模糊背景的载体 |
hsla 半透明叠加 |
玻璃质感增强 |
margin: -30px |
防止模糊被裁切 |
z-index 层级控制 |
确保文字清晰可见 |
通过以上技巧，我们就能在纯 CSS 环境下实现炫酷的 毛玻璃模糊背景特效，这在登录页、卡片、导航栏等场景中都非常实用。
💬 八、示例场景推荐
-
登录/注册弹窗
-
卡片式信息展示
-
背景叠层导航栏
-
数据仪表盘半透明层
-
高端落地页标题区
🌟 九、结语
通过本文你不仅能掌握 filter 模糊滤镜的高级用法，还能深入理解伪元素在视觉层的强大作用。
无论是静态网页还是动态组件（如 React/Vue 中的卡片组件），这种技巧都能让你的 UI 立刻提升一个档次。