CSS | background-blend-mode 属性

介绍

background-blend-mode 属性定义了如何混合一个元素的背景图像和背景颜色。这个属性会接受一个或者多个值，指定不连续的背景图像如何混合。

语法

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

• normal: 默认值。没有任何混合效果。
• multiply: 通过将背景图像颜色值相乘来创建混合。结果是一张暗色图像。
• screen: 通过将背景图像颜色值相反数相除再取相反数来创建混合。结果是一张亮色图像。
• overlay: 叠加输出图像像素值和背景图像像素值。如果像素值小于0.5，则结果为两倍的像素值；否则为1-2（1-像素值）的两倍相乘结果。
• darken: 比较背景颜色和前景颜色，并显示颜色值较低的图像。
• lighten: 比较背景颜色和前景颜色，并显示颜色值较高的图像。
• color-dodge: 背景图像的颜色值渐渐消失。结果是一张亮色图像。
• color-burn: 背景图像的颜色从图像中消失。结果是一张暗色图像。
• hard-light: 简单地将图像的清晰区域乘以背景图像的亮度，并钝化前景图像的灰度值。结果根据背景图像的亮度值生成暗或亮的像素。
• soft-light: 将图像的亮度乘以背景图像的亮度，并调整前景图像的灰度值。结果根据背景图像的亮度值生成暗或亮的像素。
• difference: 创建一张显示背景图像和前景图像之间差异的图像。
• exclusion: 创建一张显示背景图像和前景图像的类似于差异的图像，但颜色更浅。
• hue: 创建一张显示背景图像的色调和前景图像的亮度和饱和度的图像。
• saturation: 创建一张显示背景图像的饱和度和前景图像的亮度和色调的图像。
• color: 创建一张显示背景图像的色度和饱和度和前景图像的亮度的图像。
• luminosity: 创建一张显示背景图像的亮度和前景图像的色度和饱和度的图像。

示例

div{
  background-image: url('example.jpg');
  background-color: #347CA2;
  background-blend-mode: multiply;
}

在上面的示例中，我们将 background-blend-mode 属性设置为 multiply，这意味着我们应用的混合模式将通过将背景图像颜色值相乘来创建混合，从而创建一张暗色图像。

浏览器支持度

background-blend-mode 属性在以下浏览器中得到支持：

• Chrome 35+
• Firefox 30+
• Safari 7+
• Opera 22+
• IE 11+
• Edge

结论

background-blend-mode 属性是一种强大的方式，可以在通过将背景颜色和图像进行混合来创建独一无二的背景样式。正如本文中描述的那样，这个属性提供了多种混合模式，每种模式都可以根据需要实现不同的外观效果。在设计网站时，background-blend-mode 属性确实是一个值得关注和尝试的 CSS 特性。