<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>

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

示例：使用“multiply”

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

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

示例：使用“screen”

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

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

示例：使用“overlay”

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

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

示例：使用“darken”

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

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

示例：使用“lighten”

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

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

示例：使用“color-dodge”

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

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

示例：使用“color-burn”

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

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

示例：使用“hard-light”

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

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

示例：使用“soft-light”

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

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

示例：使用“difference”

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

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

示例：使用“exclusion”

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

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

示例：使用“hue”

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

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

示例：使用“saturation”

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

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

示例：使用“color”

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

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

示例：使用“luminosity”

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

#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

<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

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;
});

结果

规范

浏览器兼容性

参见

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

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

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