B07 背景渐变与滤镜

摘要：背景不是单层颜色，而是自下而上叠加的多层绘制：底层背景色、若干背景图像、最上层边框装饰。渐变函数生成的是图像而非颜色，因此能参与多层叠加；filter 作用于元素自身绘制结果，backdrop-filter 只作用于元素背后的像素。本文给出多层背景的层叠顺序、三类渐变的完整写法、毛玻璃与混合模式的组合，以及四项可验证的取舍。
关键词：多层背景，渐变，滤镜，毛玻璃，混合模式

所属：frontend/css / B-进阶 ｜ 上一篇：B06-自定义属性与主题 ｜ 下一篇：B08-字体与网络字体加载 ｜ 返回：B00-总结

1 引言

卡片顶部压一层深色渐变让白字可读、分区背景用斜向渐变替代切图、顶栏用毛玻璃透出内容——三处需求都属于背景层叠与滤镜，却常被写成三层嵌套的绝对定位元素。

本文给出用一层背景属性完成多层绘制的写法。范围见表 1-1。

项	本文覆盖	本文不覆盖
背景	多层背景、位置与尺寸、background-clip	SVG 背景与 mask 遮罩
渐变	线性、径向、锥形、重复渐变	渐变插值的色彩空间细节
滤镜	filter、backdrop-filter、mix-blend-mode	自定义 SVG 滤镜
取舍	性能成本、可读性、降级方案	动效中的滤镜性能（C03）

表 1-1 本文覆盖范围

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/visual.html	编码 UTF-8
浏览器	Chrome 130+	支持 backdrop-filter
前置	A03、B03	颜色与定位已掌握

表 2-1 环境与前置要求

3 原理与实现

3.1 背景层的绘制顺序

背景按书写顺序自下而上叠加，第一层最靠近观察者，最后一层贴着背景色，如图 3-1 所示。

flowchart TD
    A["background-color 最底层"] --> B["最后书写的背景图像"]
    B --> C["中间各层背景图像"]
    C --> D["最先书写的背景图像 最上层"]
    D --> E["border 与内容"]

图 3-1 多层背景的叠加顺序：先写者在上

图上可见：遮罩渐变必须写在图像之前（作为第一层）才能压住图片；写反了会被图片完全盖住，视觉上等于没有。

3.2 完整实现

<!-- 运行环境：Chrome 130+；css-practice/visual.html -->
<div class="hero">
  <h1>渐变与滤镜</h1>
</div>
<div class="glass">毛玻璃面板</div>
<p class="stats">增长 <span class="up">+12.5%</span></p>

/* 运行环境：Chrome 130+；css-practice/visual.css */
.hero {
  /* 1 渐变是图像，可多层叠加；先写的压在上面 */
  background-image:
    linear-gradient(to bottom, rgb(15 23 42 / 0.65), rgb(15 23 42 / 0)),
    radial-gradient(120% 80% at 20% 0%, #3b82f6 0%, transparent 60%),
    conic-gradient(from 210deg at 80% 30%, #f59e0b, #ef4444, #8b5cf6, #f59e0b);
  background-color: #0f172a;
  background-size: cover, auto, auto;
  background-position: center, top left, center;
  background-repeat: no-repeat;
  color: #f8fafc;
  padding: 4rem 1.5rem;
}

/* 2 渐变做分隔线：重复线性渐变替代图片 */
.stats {
  border-block-end: 4px solid transparent;
  border-image: repeating-linear-gradient(90deg, #2563eb 0 8px, #e2e8f0 8px 16px) 1;
}

/* 3 毛玻璃：只模糊元素背后的像素，需半透明背景才可见 */
.glass {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline: 1rem;
  padding: 1rem 1.25rem;
  background: rgb(255 255 255 / 0.55);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 0.75rem;
  isolation: isolate;              /* 建立层叠上下文，避免混合模式溢出 */
}

/* 4 混合模式：文字与背景按算法合成 */
.up {
  color: #16a34a;
  mix-blend-mode: multiply;
  font-weight: 700;
}

/* 5 无 backdrop-filter 时的降级 */
@supports not (backdrop-filter: blur(2px)) {
  .glass {
    background: rgb(255 255 255 / 0.92);
  }
}

三种渐变的定位方式见表 3-1。

渐变	写法	参数含义	典型用途
线性	linear-gradient(135deg, a, b)	方向 + 色标	遮罩、条纹、分隔线
径向	radial-gradient(80% 60% at 30% 20%, a, b)	尺寸 + 圆心 + 色标	光晕、聚光
锥形	conic-gradient(from 90deg at 50% 50%, …)	起始角 + 圆心 + 色标	色环、饼图、雷达
重复	repeating-linear-gradient(90deg, a 0 8px, b 8px 16px)	带区间色标，自动平铺	网格纸、进度条纹

表 3-1 四类渐变的参数与用途

三类滤镜的作用对象见表 3-2。

属性	作用对象	是否创建新层叠上下文	典型用途
filter	元素自身的绘制结果	是	灰度、阴影、模糊整块
backdrop-filter	元素背后的已绘制像素	是	毛玻璃顶栏、弹层
mix-blend-mode	元素与下层背景的合成方式	否（需 isolation）	文字压图、叠加高光

表 3-2 滤镜与混合模式的作用对象差异

4 验证与讨论

1. 打开页面，确认英雄区上方为深色遮罩、左下有蓝色光晕、右下呈锥形色环。
2. 把第一层 linear-gradient 移到最后，确认文字对比度骤降，验证图 3-1 的层叠顺序。
3. 给 .glass 的背景改为不透明色，确认毛玻璃效果消失，说明 backdrop-filter 需要半透明背景。
4. 在开发者工具中禁用 backdrop-filter，确认 @supports 降级生效，面板变为半透明白底。

检查项	预期结果	说明
多层叠加	三层渐变按书写顺序叠加	表 3-1
重复渐变	分隔线呈等宽条纹	表 3-1
毛玻璃	面板下方内容可见且模糊	表 3-2
降级	不支持时背景变为不透明	3.2 节 @supports
隔离	混合模式不溢出到页面其它区域	isolation: isolate

表 4-1 四项验收与毛玻璃降级

讨论与局限。 backdrop-filter 的模糊成本与模糊半径及覆盖面积成正比，全屏固定头部在小屏上更易掉帧。另，混合模式依赖下层背景的实际像素，背景透明时看不出差异，调试时先给下层一个实色。

5 常见问题

现象	原因	处理
遮罩渐变看不见	写在图像之后，被完全盖住	把遮罩层写在 background-image 首位
毛玻璃看起来和普通半透明一样	背景不透明或背后无内容	背景改用 rgb(255 255 255 / 0.5)
渐变出现生硬色带	色标过少、跨度过大	增加中间色标，或用多 stops 过渡
文字在渐变上对比度不足	渐变亮度不均	加一层固定深度的遮罩层再放文字
混合模式影响了兄弟元素	未建立层叠上下文	给容器加 isolation: isolate
打印时渐变整块变黑	打印机不输出背景	打印样式中改用纯色（@media print）

表 5-1 背景与滤镜的六类问题

6 结论

序号	结论	依据
1	背景按书写顺序自下而上叠加，遮罩写首位	图 3-1
2	渐变是图像，可多层叠加并参与定位	表 3-1
3	毛玻璃依赖半透明背景，需提供降级	表 3-2
4	混合模式需 isolation 限定作用范围	表 5-1

表 6-1 结论汇总

• 上一篇：B06-自定义属性与主题
• 下一篇：B08-字体与网络字体加载
• 返回：B00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · 使用 CSS 渐变，https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients（访问于 2026-10-31）
[2] MDN Web Docs · backdrop-filter，https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter（访问于 2026-10-31）