CSS如何使用混合模式background-blend-mode实现颜色叠加-css教程-PHP中文网

CSS如何使用混合模式background-blend-mode实现颜色叠加

P粉602998670

发布： 2025-11-29 20:43:58

原创

535人浏览过

background-blend-mode 可实现多背景混合，如 .element{background-image:url('image1.jpg'),url('image2.jpg');background-color:#ffcc00;background-blend-mode:multiply;} 通过 multiply 等模式使图像与颜色叠加变暗；.tinted-image 使用 overlay 将粉色背景与照片融合，营造红调氛围；.multi-blend 设置多个背景图与渐变，按顺序应用 multiply 和 screen 混合模式，创造层次感；需注意背景层顺序、至少两个背景层才能生效，并在现代浏览器中测试兼容性。

css如何使用混合模式background-blend-mode实现颜色叠加

CSS 的 background-blend-mode 属性可以让你在多个背景之间实现颜色叠加效果，类似于 Photoshop 中的图层混合模式。它适用于元素设置的多个背景图像和背景颜色之间的融合，能创造出丰富的视觉层次。

理解 background-blend-mode 的基本语法

background-blend-mode 定义了多个背景（图片或颜色）如何相互混合。它的值写在元素的 CSS 规则中，作用于该元素的所有背景层。

常见混合模式包括：

normal：默认值，无混合
multiply：正片叠底，颜色变暗
screen：滤色，颜色变亮
overlay：叠加，结合 multiply 和 screen 效果
darken：取较暗部分
lighten：取较亮部分
difference：差值，产生反差效果

使用方式如下：

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-color: #ffcc00;
  background-blend-mode: multiply;
}

登录后复制

所有背景层（包括颜色）都会按指定模式混合。

立即学习“前端免费学习笔记（深入）”；

用背景颜色与图像叠加创造色调效果

你可以将纯色背景与图像结合，利用混合模式统一画面色调。比如让一张照片呈现暖黄或冷蓝的滤镜感。

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

217

查看详情

.tinted-image {
  width: 300px;
  height: 200px;
  background-image: url('photo.jpg');
  background-color: #f06;
  background-blend-mode: overlay;
  background-size: cover;
}

登录后复制

这里图像与粉色背景通过 overlay 模式叠加，使照片整体染上红调，增强视觉氛围。

多图层背景的创意混合

当你为一个元素设置多个背景图像时，background-blend-mode 可以让它们自然融合。

.multi-blend {
  width: 400px;
  height: 300px;
  background-image: 
    linear-gradient(45deg, transparent, #00f),
    url('texture.png'),
    url('photo.jpg');
  background-blend-mode: multiply, screen;
  background-size: cover;
}

登录后复制

注意：如果有多个混合模式，需按背景层顺序对应填写。上面例子中，最上层与中间层用 multiply 混合，中间与底层用 screen 混合。