如何实现 CSS 中两个背景色的叠加？

在CSS中实现两个背景色的叠加，有多种成熟的技术方案，开发者可以根据实际的视觉效果需求选择最合适的实现方式，不同的方案适用场景和最终呈现效果存在明显差异。

方法一：使用线性渐变实现背景色叠加

线性渐变是CSS中实现两个背景色叠加最基础的方式，通过linear-gradient函数可以直接定义两种颜色的过渡效果，默认情况下两种颜色会平滑叠加融合。

如果需要两种颜色各占一半且没有过渡，可以设置颜色断点为50%，示例代码如下：

/* 上半部分为红色，下半部分为蓝色，无过渡 */
.box {
  width: 300px;
  height: 200px;
  background: linear-gradient(to bottom, #ff0000 50%, #0000ff 50%);
}

如果需要两种颜色有渐变过渡效果，只需要去掉颜色断点设置，让浏览器自动计算过渡区间即可：

/* 红色到蓝色的平滑渐变叠加 */
.box {
  width: 300px;
  height: 200px;
  background: linear-gradient(to bottom, #ff0000, #0000ff);
}

方法二：使用多层背景叠加

CSS支持为一个元素设置多层背景，每一层背景可以是纯色、渐变或者图片，通过设置background属性的多值，让两层背景叠加在一起。

这种方式可以实现半透明背景色的叠加，比如底层是纯色，上层是半透明颜色，叠加后会出现混合效果：

/* 底层白色，上层半透明红色，叠加后呈现浅红色 */
.box {
  width: 300px;
  height: 200px;
  background: 
    rgba(255, 0, 0, 0.5),  /* 上层半透明红色 */
    #ffffff;               /* 底层白色 */
  background-size: 100% 100%;
}

注意多层背景的书写顺序，先写的背景层会显示在更上层，后写的背景层显示在更下层。

方法三：使用background-blend-mode混合模式

如果已经设置了多层背景，还可以通过background-blend-mode属性设置背景层之间的混合模式，实现更复杂的叠加效果，类似图像处理软件中的图层混合逻辑。

常用的混合模式包括multiply（正片叠底）、screen（滤色）、overlay（叠加）等，示例代码如下：

/* 两层背景使用正片叠底模式混合 */
.box {
  width: 300px;
  height: 200px;
  background: 
    #ff0000,  /* 第一层红色 */
    #0000ff;  /* 第二层蓝色 */
  background-blend-mode: multiply;
}

不同方案的选择建议

可以根据实际需求选择对应的实现方案：

• 如果需要简单的两种颜色过渡或分区域显示，优先选择线性渐变方案，代码简洁且兼容性较好。
• 如果需要半透明颜色叠加，或者背景层包含图片和颜色混合，选择多层背景方案更合适。
• 如果需要特殊的混合视觉效果，比如加深、变亮等，可以结合多层背景和background-blend-mode属性实现。

兼容性说明

线性渐变和多重背景在主流现代浏览器中都得到了良好支持，background-blend-mode属性在Chrome、Firefox、Edge等现代浏览器中也已经支持，如果需要兼容旧版浏览器，建议优先使用线性渐变或者多层背景的基础方案，避免使用混合模式属性。

CSSbackgroundlinear_gradientbackground_blend_mode修改时间：2026-06-23 11:42:26