📌  相关文章
📜  CSS background-blend-mode属性

📅  最后修改于: 2020-11-05 05:31:36             🧑  作者: Mango

CSS background-blend-mode

此CSS属性为元素的每个背景层(图像/颜色)设置混合模式。它定义了元素的背景图像如何与元素的背景颜色融合。我们可以将背景图像混合在一起，也可以将它们与背景色混合。

Edge / Internet Explorer不支持此属性。

句法

background-blend-mode: normal | multiply | screen | color-dodge | difference | darken | lighten | saturation | luminosity | overlay | hard-light | soft-light | exclusion | hue | color-burn | color;

此属性具有许多属性值。让我们用每个示例讨论上述混合模式。

normal

这是将属性模式设置为正常的默认值。

multiply

它将背景颜色和背景图像相乘，从而导致图像比以前更暗。用于将混合模式设置为乘法。

例












 Original Images 






 background-blend-mode: multiply;

screen

它用于将混合模式设置为屏幕并反转图像和颜色。这种效果就像在投影屏幕上显示两个图像。

例












 Original Images 






 background-blend-mode: screen;
color-dodge

它类似于屏幕混合模式。用于将混合模式设置为减淡色。此模式的最终结果是将背景颜色除以背景图像的倒数的结果。

例












 Original Images 






 background-blend-mode: color-dodge;
difference

用于将混合模式设置为差异。其最终结果是从最浅的颜色中减去深色的结果。

例












 Original Images 






 background-blend-mode: difference;
darken

用于将混合模式设置为变暗。

例












 Original Images 






 background-blend-mode: darken;
lighten

用于将混合模式设置为变亮。

例












 Original Images 






 background-blend-mode: lighten;
Saturation

其最终结果是使用底色的色相和亮度，使顶色饱和。

例












 Original Images 






 background-blend-mode: saturation;
luminosity

用于将混合模式设置为亮度。其最终结果是顶部颜色的亮度，同时使用底部颜色的色相和饱和度。

例












 Original Images 






 background-blend-mode: luminosity;
overlay

用于将混合模式设置为叠加。

例












 Original Images 






 background-blend-mode: overlay;
hard-light

用于将混合模式设置为强光。

例












 Original Images 






 background-blend-mode: hard-light;
soft-light

用于将混合模式设置为柔光。

例












 Original Images 






 background-blend-mode: soft-light;
exclusion

用于将混合模式设置为排除。

例












 Original Images 






 background-blend-mode: exclusion;
hue

其结果是背景图像的色调与背景颜色的亮度和饱和度的结合。

例












 Original Images 






 background-blend-mode: hue;
color-burn

用于将混合模式设置为彩色烙印。

例












 Original Images 






 background-blend-mode: color-burn;
color

用于将混合模式设置为彩色。它可以保持背景色的亮度以及背景图像的色相和饱和度。

例












 Original Images 






 background-blend-mode: color;