🌈 一、前言
在现代网页设计中，毛玻璃（Frosted Glass）效果是常见的高级 UI 风格。无论是登录弹窗、信息卡片还是仪表盘背景，它都能带来优雅的层次感与视觉柔化效果。
本文将介绍如何通过纯 CSS 实现毛玻璃模糊背景特效，无需 JavaScript，也不依赖额外库。
🖼️ 二、效果预览
最终效果如下图所示：
背景图片清晰，而中间的内容区域呈现半透明模糊的'玻璃'质感，文字浮在上方清晰可见。
🧩 三、完整源码
以下是完整 HTML + CSS 源码，你可以直接复制运行（需准备同目录下的 image/4.jpg 作为背景图）。
<!DOCTYPE html>
<!-- RGBA/HSLA颜色 -->
<!-- 把文本层所覆盖的那部分图片区域作模糊处理 -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
width: 100%;
height: 100%;
: flex;
: center;
: center;
: ;
}
, {
: () / cover fixed;
: -;
}
{
: ;
: ;
: 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, with desire for what its monstrous laws have made monstrous and unlawful."
—— Oscar Wilde, The Picture of Dorian Gray
