<blend-mode>

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

<blend-mode> CSS 数据类型描述了当元素重叠时颜色应如何显示。它用于 background-blend-mode 和 mix-blend-mode 属性中。

语法

<blend-mode> 数据类型使用从以下列表中选择的关键字值进行定义。

值

normal: 最终颜色是顶层颜色，无论底层颜色是什么。效果就像两张不透明的纸重叠。
multiply（正片叠底）: 最终颜色是顶层和底层颜色相乘的结果。黑色图层会导致最终图层变为黑色，白色图层则不会发生变化。效果就像两张印刷在透明胶片上的图像重叠。
screen: 最终颜色是反转颜色、将它们相乘并反转该值的结果。黑色图层不会发生变化，白色图层会导致最终图层变为白色。效果就像两张图像照射到投影屏幕上。
overlay: 如果底层颜色较深，则最终颜色是 multiply 的结果；如果底层颜色较浅，则最终颜色是 screen 的结果。此混合模式等同于 hard-light，但图层互换。
darken（变暗）: 最终颜色由每个颜色通道中最暗的值组成。
lighten（变亮）: 最终颜色由每个颜色通道中最亮的值组成。
color-dodge（颜色减淡）: 最终颜色是底层颜色除以顶层颜色的反色得到的结果。黑色前景不会发生变化。前景与背景色的反色相同会导致完全明亮的颜色。此混合模式类似于 screen，但前景只需要像背景色的反色一样亮即可创建完全明亮的颜色。
color-burn（颜色加深）: 最终颜色是反转底层颜色、将该值除以顶层颜色并反转该值的结果。白色前景不会发生变化。前景与背景色的反色相同会导致最终图像变为黑色。此混合模式类似于 multiply，但前景只需要像背景色的反色一样暗即可使最终图像变为黑色。
hard-light（强光）: 如果顶层颜色较深，则最终颜色是 multiply 的结果；如果顶层颜色较浅，则最终颜色是 screen 的结果。此混合模式等同于 overlay，但图层互换。效果类似于用刺眼的聚光灯照射背景。
soft-light（柔光）: 最终颜色类似于 hard-light，但更柔和。此混合模式的行为类似于 hard-light。效果类似于用漫射聚光灯照射背景。
difference（差值）: 最终颜色是较亮的颜色减去较暗的颜色得到的结果。黑色图层没有效果，而白色图层会反转另一个图层的颜色。
exclusion（排除）: 最终颜色类似于 difference，但对比度较低。与 difference 一样，黑色图层没有效果，而白色图层会反转另一个图层的颜色。
hue（色相）: 最终颜色具有顶层颜色的色相，同时使用底层颜色的饱和度和亮度。
saturation（饱和度）: 最终颜色具有顶层颜色的饱和度，同时使用底层颜色的色相和亮度。纯灰色背景（没有饱和度）将没有效果。
color: 最终颜色具有顶层颜色的色相和饱和度，同时使用底层颜色的亮度。此效果保留了灰度级别，可用于对前景进行着色。
luminosity（亮度）: 最终颜色具有顶层颜色的亮度，同时使用底层颜色的色相和饱和度。此混合模式等同于 color，但图层互换。

描述

对于应用混合模式的每个图层中的每个像素，混合模式会获取前景和背景的颜色，对其进行计算，并返回新的颜色值。

混合模式之间的变化不会进行插值。任何变化都会立即发生。

正式语法

<blend-mode> = 
  normal       |
  multiply     |
  screen       |
  overlay      |
  darken       |
  lighten      |
  color-dodge  |
  color-burn   |
  hard-light   |
  soft-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

示例

使用“normal”的示例

<div id="div"></div>

css

#div {
  width: 150px;
  height: 150px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}

为 background-blend-mode 设置其他值，您将获得不同的结果。

`background-blend-mode` 不同值之间的比较

<div class="container"></div>

css

.container {
  width: 720px;
  height: 760px;
  display: grid;
  grid: auto-flow 190px / repeat(4, 180px);
  border-top: 1px solid #d8d8d8;
  border-left: 1px solid #d8d8d8;
}

.container > div {
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}

.container div div {
  margin-left: 15px;
  width: 150px;
  height: 150px;
  background: url("br.png"), url("tr.png");
}

.container div p {
  line-height: 30px;
  margin: 0;
  color: #a33333;
  text-align: center;
}

const list = [
  "normal",
  "multiply",
  "screen",
  "overlay",
  "darken",
  "lighten",
  "color-dodge",
  "color-burn",
  "hard-light",
  "soft-light",
  "difference",
  "exclusion",
  "hue",
  "saturation",
  "color",
  "luminosity",
];

const containerElem = document.querySelector(".container");

list.forEach((item) => {
  const innerElem = document.createElement("div");
  innerElem.style.backgroundBlendMode = item;

  const textElem = document.createElement("p");
  textElem.innerText = item;

  const outerElem = document.createElement("div");
  outerElem.appendChild(textElem);
  outerElem.appendChild(innerElem);

  containerElem.appendChild(outerElem);
});

通过遍历列表创建多个 div 元素，并为每个元素设置不同的 backgroundBlendMode 值。

`mix-blend-mode` 不同值之间的比较

<div class="container"></div>

.container {
  width: 640px;
  height: 800px;
  display: grid;
  grid: auto-flow 160px / repeat(4, 160px);
  border-top: 1px solid #d8d8d8;
  border-left: 1px solid #d8d8d8;
}

.container > div {
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}

.container > div > div {
  position: relative;
  margin-left: 20px;
  width: 120px;
  height: 120px;
}

.container div p {
  margin: 0;
  line-height: 30px;
  color: #a33333;
  text-align: center;
}
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /* Without isolation, the background color will be taken into account */
  position: relative;
}

const list = [
  "normal",
  "multiply",
  "screen",
  "overlay",
  "darken",
  "lighten",
  "color-dodge",
  "color-burn",
  "hard-light",
  "soft-light",
  "difference",
  "exclusion",
  "hue",
  "saturation",
  "color",
  "luminosity",
  "plus-darker",
  "plus-lighter",
];

const containerElem = document.querySelector(".container");

list.forEach((item) => {
  const innerElem = document.createElement("div");
  innerElem.innerHTML = `
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
  `;

  innerElem.querySelectorAll(".circle").forEach((circle) => {
    circle.style.mixBlendMode = item;
  });

  const textElem = document.createElement("p");
  textElem.innerText = item;

  const outerElem = document.createElement("div");
  outerElem.appendChild(textElem);
  outerElem.appendChild(innerElem);

  containerElem.appendChild(outerElem);
});

在以下示例中，我们通过遍历列表创建多个 <div> 元素，并为每个元素设置不同的 mixBlendMode 值。

混合模式比较

在以下示例中，我们有一个 <div>，上面设置了两个背景图像——一个 Firefox 徽标在线性渐变之上。在下面，我们提供了一个 <select> 菜单，允许您更改应用于 <div> 的 background-blend-mode，从而比较不同的混合模式效果。

HTML

html

<div></div>
<p>Choose a blend-mode:</p>
<select>
  <option selected>normal</option>
  <option>multiply</option>
  <option>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>

CSS

css

div {
  width: 300px;
  height: 300px;
  background:
    url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png")
      no-repeat center,
    linear-gradient(to bottom, blue, orange);
}

JavaScript

const selectElem = document.querySelector("select");
const divElem = document.querySelector("div");

selectElem.addEventListener("change", () => {
  divElem.style.backgroundBlendMode = selectElem.value;
});

结果

规范

规范
Compositing and Blending Level 2 # ltblendmodegt

浏览器兼容性

另见

定义 <blend-mode> 值的 CSS 合成和混合模块。
使用此数据类型的属性：background-blend-mode、mix-blend-mode

其他网站上各种混合模式的描述

维基百科上的混合模式
Adobe 的Adobe Photoshop 中的混合模式

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者于 2025 年 10 月 10 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题