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: 结合 multiply 和 screen 模式。
• darken: 取两者中的最暗色作为背景。
• lighten: 取两者中的最亮色作为背景。
• color-dodge: 通过减少背景颜色来使背景变亮。
• color-burn: 通过增加背景颜色来使背景变暗。
• hard-light: 将 color-dodge 和 color-burn 混合。
• soft-light: 类似于 overlay，但效果更加柔和。
• difference: 取两者的差异作为背景。
• exclusion: 排除两者的相似部分，保留不同部分。
• hue: 保留背景颜色的色调，应用背景图像的亮度和饱和度。
• saturation: 保留背景颜色的饱和度，应用背景图像的色调和亮度。
• color: 保留背景颜色的色调和饱和度，应用背景图像的亮度。
• luminosity: 保留背景颜色的亮度，应用背景图像的色调和饱和度。

示例代码

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

在上面的示例中，背景图像 example.jpg 与红色背景颜色相乘，产生新的混合效果。

background-blend-mode 属性为开发者提供了丰富的选择，可以根据实际需求和设计要求来定制背景效果，使页面更加生动和吸引人。