介绍

用于描述当元素重叠时，颜色应当如何呈现。被用于 background-blend-mode和 mix-blend-mode属性。

当层重叠时，混合模式是计算像素最终颜色值的方法，每种混合模式采用前景和背景的颜色值，执行其计算并返回最终的颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。

属性值

• normal：最终颜色永远是顶层颜色，无论底层颜色是什么。
  其效果类似于两张不透明的纸重叠（overlapping）在一起。

• multiply：最终颜色为顶层颜色与底层颜色相乘的结果。
  如果叠加黑色层，则最终层必为黑色层，叠加白色层不会造成变化。 其效果类似于在透明薄膜上重叠印刷的两个图像。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: multiply;
}
#d2{
    background-color: white;
    background-blend-mode: multiply;
}
#d3{
    background-color: black;
    background-blend-mode: multiply;
}

• screen：最终的颜色是反转顶层颜色和底层颜色，将反转后的两个颜色相乘，再反转相加得到的和得到的结果。
  黑色层不会造成变化，白色层导致白色最终层。 其效果类似于（被投影仪）投射到投影屏幕上的两个图像。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: screen;
}
#d2{
    background-color: white;
    background-blend-mode: screen;
}
#d3{
    background-color: black;
    background-blend-mode: screen;
}

• overlay：如果底层颜色比顶层颜色深，则最终颜色是 multiply 的结果，如果底层颜色比顶层颜色浅，则最终颜色是 screen 的结果。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: overlay;
}
#d2{
    background-color: white;
    background-blend-mode: overlay;
}
#d3{
    background-color: black;
    background-blend-mode: overlay;
}

• darken：最终颜色是由每个颜色通道下，顶底两层颜色中的最暗值所组成的颜色。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: darken;
}
#d2{
    background-color: white;
    background-blend-mode: darken;
}
#d3{
    background-color: black;
    background-blend-mode: darken;
}

• lighten：最终颜色是每个颜色通道下，顶底两层颜色中的最亮值所组成的颜色。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: lighten;
}
#d2{
    background-color: white;
    background-blend-mode: lighten;
}
#d3{
    background-color: black;
    background-blend-mode: lighten;
}

• color-dodge：最终颜色是将底部颜色除以顶部颜色的反色的结果。
  黑色前景不会造成变化。前景如果是背景的反色，会得到白色（fully lit color，完全亮起的颜色，应当为白色）。
  此混合模式类似于 screen，但是，前景只需要和背景的反色一样亮，最终图像就会变为全白。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: color-dodge;
}
#d2{
    background-color: white;
    background-blend-mode: color-dodge;
}
#d3{
    background-color: black;
    background-blend-mode: color-dodge;
}

• color-burn：最终颜色是反转底部颜色，将反转后的值除以顶部颜色，再反转除以后的值得到的结果。
  白色的前景不会导致变化，前景如果是背景的反色，会得到黑色。
  此混合模式类似于 multiply，但是，前景只需要和背景的反色一样暗，最终图像就会变为全黑。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: color-burn;
}
#d2{
    background-color: white;
    background-blend-mode: color-burn;
}
#d3{
    background-color: black;
    background-blend-mode: color-burn;
}

• hard-light：如果顶层颜色比底层颜色深，则最终颜色是 multiply 的结果，如果顶层颜色比底层颜色浅，则最终颜色是 screen 的结果。
  此混合模式相当于顶层与底层互换后的overlay。 其效果类似于在背景层上（用前景层）打出一片刺眼的聚光灯。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: hard-light;
}
#d2{
    background-color: white;
    background-blend-mode: hard-light;
}
#d3{
    background-color: black;
    background-blend-mode: hard-light;
}

• soft-light：最终颜色类似于 hard-light 的结果，但更加柔和一些。
  此混合模式的表现类似hard-light。
  其效果类似于在背景层上（用前景层）打出一片 发散 的聚光灯。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: soft-light;
}
#d2{
    background-color: white;
    background-blend-mode: soft-light;
}
#d3{
    background-color: black;
    background-blend-mode: soft-light;
}

• difference：最终颜色是 两种颜色中较浅的颜色 减去 两种颜色中较深的颜色 得到的结果。
  黑色层不会造成变化，而白色层会反转另一层的颜色。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: difference;
}
#d2{
    background-color: white;
    background-blend-mode: difference;
}
#d3{
    background-color: black;
    background-blend-mode: difference;
}

• exclusion：最终颜色类似于 difference，但对比度更低一些。
  和difference相同，黑色层不会造成变化，而而白色层会反转另一层的颜色。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: exclusion;
}
#d2{
    background-color: white;
    background-blend-mode: exclusion;
}
#d3{
    background-color: black;
    background-blend-mode: exclusion;
}

• hue：最终颜色由顶部颜色的 色调 和 底部颜色的 饱和度 与 亮度 组成。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: hue;
}
#d2{
    background-color: white;
    background-blend-mode: hue;
}
#d3{
    background-color: black;
    background-blend-mode: hue;
}

• saturation：最终颜色由顶部颜色的 色调 和底部颜色的 饱和度 与 发光度 组成。
  饱和度为零的纯灰色背景层不会造成变化。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: saturation;
}
#d2{
    background-color: white;
    background-blend-mode: saturation;
}
#d3{
    background-color: black;
    background-blend-mode: saturation;
}

• color：最终颜色由顶部颜色的 色调 与 饱和度 和 底部颜色的 亮度 组成。 此效果保留了灰度级别，可用于为前景着色。（The effect preserves gray levels and can be used to colorize the foreground.）

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: color;
}
#d2{
    background-color: white;
    background-blend-mode: color;
}
#d3{
    background-color: black;
    background-blend-mode: color;
}

• luminosity：最终颜色由顶部颜色的亮度和底部颜色的色调和饱和度组成。
  此混合模式相当于顶层与底层互换后的 color。

示例：

#d1{
    background-color: cornflowerblue;
    background-blend-mode: luminosity;
}
#d2{
    background-color: white;
    background-blend-mode: luminosity;
}
#d3{
    background-color: black;
    background-blend-mode: luminosity;
}