<blend-mode>

**<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: 最终颜色具有顶部颜色的色相和饱和度，同时使用底部颜色的亮度。此效果保留灰度级别，可用于对前景进行着色。
亮度: 最终颜色具有顶部颜色的亮度，同时使用底部颜色的色相和饱和度。此混合模式等效于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: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}

使用“multiply”的示例

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

css

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

使用“screen”的示例

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

css

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

使用“overlay”的示例

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

css

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

使用“darken”的示例

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

css

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

使用“lighten”的示例

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

css

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

使用“color-dodge”的示例

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

css

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

使用“color-burn”的示例

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

css

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

使用“hard-light”的示例

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

css

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

使用“soft-light”的示例

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

css

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

使用“difference”的示例

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

css

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

使用“exclusion”的示例

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

css

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

使用“hue”的示例

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

css

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

使用“saturation”的示例

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

css

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

使用“color”的示例

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

css

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

使用“luminosity”的示例

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

css

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

混合模式比较

在下面的示例中，我们有一个带有两个背景图像的<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;
});

结果

规范

规范
合成和混合级别 2 # ltblendmodegt

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

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

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

Wikipedia 上的混合模式
Adobe Photoshop 中的混合模式由 Adobe 提供