混合模式 <blend-mode>

概述

<blend-mode>这个词关键是是一组描述混合模式的类型。

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

语法

该属性的语法尚未添加

系统可见值

normal

黑色层导致黑色最终层，白色层导致无变化。该效果类似于在透明膜重叠上印刷的两个图像，效果类似于两张不透明的纸张重叠。

multiply

该效果类似于在透明膜重叠上印刷的两个图像。黑色层导致黑色最终层，白色层导致无变化。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: multiply;
}

screen

效果类似于照射到投影屏幕上的两个图像，黑色层导致无变化，白色层导致白色最终层。最终颜色是底部颜色较深的乘法结果，或底部颜色较浅的屏幕。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: screen;
}

overlay

这种混合模式相当于硬光与层交换，最终颜色是底部颜色较深的乘法结果，或底部颜色较浅的屏幕。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: overlay;
}

darken

最终颜色是由每个颜色通道的最暗值组成的颜色。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: darken;
}

lighten

最终颜色是由每个颜色通道的最亮值组成的颜色。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: lighten;
}

color-dodge

最终颜色是将底部颜色除以顶部颜色的倒数的结果。黑色前景导致没有变化。具有背景的反色的前景将导致完全亮起的颜色。

这种混合模式类似于屏幕，但前景只需要像背景的反转一样轻，以达到完全亮起的颜色。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: color-dodge;
}

color-burn

将值除以顶部颜色，并反转该值的结果。这个最终颜色是反转底部颜色
一个白色的前景导致没有变化，具有背景的反色的前景导致黑色最终图像。这种混合模式类似于乘法，但是前景只需要像背景的反转一样暗，以使最终图像变黑。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: color-burn;
}

hard-light

The final color is the result of multiply if the top color is darker, or screen if the top color is lighter.
This blend mode is equivalent to overlay but with the layers swapped.
The effect is similar to shining a harsh spotlight on the backdrop.

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: hard-light;
}

soft-light

hard-light，最终颜色比较柔和。
这种混合模式类似于，hard-light。
效果类似于 扩散 一个在背景的聚光灯。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: soft-light;
}

difference

黑色层没有效果，而白色层反转另一层的颜色。最终的颜色是从较浅的颜色中减去两种颜色的较暗的结果。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: difference;
}

exclusion

The final color is similar to difference, but with less contrast.
As with difference,  a black layer has no effect, while a white layer inverts the other layer's color.

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: exclusion;
}

hue

同时使用底部颜色的饱和度和亮度，最终颜色具有顶部颜色的色调。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: hue;
}

saturation

最终颜色具有顶部颜色的色调，同时使用底部颜色的饱和度和发光度。纯灰色的背景，没有饱和，将没有效果。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: saturation;
}

color

最终颜色具有顶部颜色的色调和饱和度。而使用底部颜色的亮度，效果保留了灰度级别，可用于前景着色。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: color;
}

luminosity

最终颜色具有顶部颜色的亮度，同时使用底部颜色的色调和饱和度。随着层交换，这种混合模式相当于颜色。

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

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: luminosity;
}

插入混合模式

更改突然发生插入混合模式之间的变化。

规范

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

另请参阅

• 使用此类型的属性值： background-blend-mode and mix-blend-mode
• 混合模式
• index CSS 参考