背景混合模式属性

背景混合特性是CSS3中介绍的新特性，允许将背景颜色与背景图像进行混合，生成更为多样化的效果，包括但不限于透明、颜色变化、模糊等等效果。

语法

background-blend-mode: <blend-mode>;

<blend-mode> 表示混合模式。支持的值如下：

• normal：默认值，不进行混合
• multiply：将背景图像和背景颜色进行混合，象素值相乘
• screen：将背景图像和背景颜色进行混合，将两个象素值相加，但是不会超过255
• overlay：背景图像覆盖背景颜色，如果底层颜色较暗，则背景图像会显得更亮，反之，背景图像会变暗
• darken：比较底层和顶层的颜色，输出较暗的颜色
• lighten：比较底层和顶层的颜色，输出较亮的颜色
• color-dodge：底层颜色除以置于顶层的颜色的补数
• color-burn：补齐底层颜色和置于顶层的颜色之和减去255
• difference：返回两个应用混合的图像的差异
• exclusion：顶层与底层的反色之和的反色
• hue：将顶层颜色应用在底层颜色的位置，并使用底层颜色的明度和饱和度
• saturation：将底层颜色的饱和度应用在顶层颜色的位置，并使用顶层颜色的亮度和颜色
• color：将顶层颜色与底层颜色进行混合
• luminosity：将底层颜色的亮度应用在顶层颜色的位置，并使用顶层颜色的饱和度和颜色

示例

div{
  background-image: url('bg.jpeg');
  background-color: #808080;
  background-blend-mode: screen;
  /* 其他样式 */
}

以上代码表示将 bg.jpeg 这张图片和背景颜色 #808080 进行 screen 模式混合。

注意事项

• 目前还没有所有浏览器都支持背景混合属性，需要针对不同的浏览器进行兼容处理。
• 除了 normal 模式外，其他混合模式的效果受到底层和顶层颜色的影响，需要根据实际情况进行调整。
• 背景混合属性并不是万能的，有时候需要配合其他样式才能达到想要的效果。