CSS background-blend-mode 属性

CSS 的 background-blend-mode 属性可以用于指定在两个或多个背景图像混合时使用的混合模式。这可以用于创建各种视觉效果，例如将图像叠加在彼此之上，或在背景上叠加文本以提高可读性。

语法

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

属性值

• normal：默认值，将背景与前景重叠。
• multiply：将两个图像的颜色值相乘。
• screen：将两个图像的互补颜色值相乘。
• overlay：根据前景和背景的亮度来混合图像。
• darken：使用最暗的颜色值。
• lighten：使用最亮的颜色值。
• color-dodge：使背景颜色变亮。
• saturation：将前景图像的饱和度混合到背景中。
• color：根据前景图像的色调混合背景颜色。
• luminosity：根据前景图像的亮度混合背景颜色。

示例

以下示例展示了使用 background-blend-mode 属性将两个图像叠加在一起：

div {
  background-image: url("background.jpg"), url("foreground.png");
  background-blend-mode: multiply;
}

在这个示例中，background.jpg 图像被放置在 foreground.png 图像上面，并使用 multiply 模式混合。这将创建一个新的背景图像，其中颜色值被相乘，从而产生比原始图像更暗的颜色。

浏览器支持

background-blend-mode 属性受到良好的浏览器支持，支持的浏览器版本包括：

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

总结

使用 background-blend-mode 属性可以轻松地混合多个背景图像，从而创建丰富多样的背景效果。建议在开发响应式网站时谨慎使用此功能，因为在不同分辨率和屏幕宽度上，可能需要不同的混合模式来获得最佳效果。