背景色叠加在 CSS 中有哪些实现方式？

在 CSS 中实现背景色叠加，本质是把两层或多层颜色按一定规则合并显示。不同方式在兼容性、可控性和语义上各有差异，下面分别介绍几种主流做法。

一、使用 rgba 半透明颜色直接叠加

最简单的方式是给上层元素设置带透明度的背景色，透出底下的颜色形成叠加感。例如卡片悬浮时覆盖一层黑色遮罩：

.card {
  background-color: #ffffff;
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

这种方式兼容性好，但只能实现均匀透明叠加，无法做复杂混合。

二、多重 background 图层叠加

CSS 允许在一个 background 属性里写多个图层，前面图层覆盖后面图层：

.box {
  background:
    linear-gradient(rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.3)),
    linear-gradient(to right, #00f, #0ff);
}

利用渐变充当纯色半透明层，可以在不增加 DOM 节点的前提下完成叠加。

三、mix-blend-mode 混合模式

如果希望颜色按正片叠底、滤色等规则混合，可以使用 mix-blend-mode：

.parent { background: #ffcc00; }
.child {
  background: #0066ff;
  mix-blend-mode: multiply;
}

该方式表现力强，但需要注意父级不能设置 isolation: isolate 之外的隔离，否则混合范围受限。

四、伪元素与 backdrop-filter 结合

伪元素叠加背景色，再配合 backdrop-filter 可对底层实时模糊处理：

.modal::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

适合弹窗遮罩场景，视觉层次更明显。

对比总结

实际项目中可根据目标浏览器和效果复杂度灵活组合上述方案。

CSS背景色叠加混合模式修改时间：2026-07-26 12:51:32