<blend-mode>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

语法

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

值

normal: 最终颜色是顶层颜色，无论底层颜色是什么。其效果类似于两张不透明的纸重叠（overlapping）在一起。
multiply: 最终颜色为顶层颜色与底层颜色相乘的结果。如果叠加黑色层，则最终层必为黑色层，叠加白色层不会造成变化。其效果类似于在透明薄膜上重叠印刷的两个图像。
screen: 最终的颜色是反转颜色（顶层颜色和底层颜色），相乘它们并反转该值的结果。黑色层不会造成变化，白色层导致白色最终层。其效果类似于投射到投影屏幕上的两个图像。
overlay: 如果底层颜色比顶层颜色深，则最终颜色是 multiply 的结果，如果底层颜色比顶层颜色浅，则最终颜色是 screen 的结果。此混合模式相当于顶层与底层互换后的 hard-light。
darken: 最终颜色是由每个颜色通道下，顶底两层颜色中的最暗值所组成的颜色。
lighten: 最终颜色是每个颜色通道下，顶底两层颜色中的最亮值所组成的颜色。
color-dodge: 最终颜色是将底层颜色除以顶层颜色的反色的结果。黑色前景不会造成变化。前景如果是背景的反色，会得到白色（fully lit color，完全亮起的颜色，应当为白色）。此混合模式类似于 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: 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;
}

混合模式比较

在以下示例中，我们有一个带有两张背景图片（在线性渐变之上有一个 Firefox 的 logo）的 <div>。它的下面，我们提供一个 <select> 菜单，允许你改变应用到 <div> 上的 background-blend-mode，你可以借此比较不同的混合模式效果。

HTML

html

<div></div>
<p>选择 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;
});

结果

规范

Specification
Compositing and Blending Level 2 # ltblendmodegt

浏览器兼容性

BCD tables only load in the browser

参见

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

其他网站上对各种混合模式的说明与介绍：

Wikipedia 上的混合模式
Adobe 提供的 Blending modes in Adobe Photoshop