前言
在现代网页设计中，毛玻璃（Frosted Glass）效果几乎是高端 UI 的标配。无论是登录弹窗、信息卡片，还是仪表盘背景，它都能带来优雅的层次感与视觉柔化效果。
本文将通过纯 CSS 实现毛玻璃模糊背景特效，无需 JavaScript，也不依赖额外库。代码短小、兼容性强，非常适合前端开发者在实际项目中复用。
完整代码示例
你可以将以下 HTML 和 CSS 保存为一个文件直接运行。注意需要替换 image/4.jpg 为你的本地图片路径。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<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: ;
: flex;
: center;
: center;
: ;
: relative;
: (, , , .);
: hidden;
}
{
: ;
: absolute;
: ;
: ;
: ;
: ;
: ();
: -;
: -;
}
"The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself..."
—— Oscar Wilde, The Picture of Dorian Gray
