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 重叠。在此模式下，颜色会根据原色而倍增或变亮。图案或颜色与现有像素重叠，使原色的亮区和暗区保持不变。基色不会被替换，而是与组合的颜色混合，这使您可以反映原始颜色的亮区或暗区的存在。
• darken 换成深色的。因此，选择主颜色或组合颜色，具体取决于哪种颜色较暗。颜色比组合颜色亮的像素将被替换，颜色比组合颜色暗的像素保持不变。
• lighten 更换光。作为结果颜色，选择主要颜色或组合颜色，具体取决于哪一种颜色更浅。与组合颜色相比颜色较深的像素将被替换，与组合颜色相比颜色较浅的像素保持不变。
• flcolor-dodge 减轻基础。原色被更亮的颜色替换，以反映由于两种颜色之间的对比度降低而组合的颜色。与黑色混合不会导致任何变化。
• color-burn 调暗底座。原色被替换为较深的颜色，以反映由于两种颜色之间的对比度增加而组合的颜色。与白色混合不会导致任何变化。
• hard-light 定向光。在此模式下，颜色会根据组合的颜色而倍增或变亮。该效果类似于用聚光灯的锐光照亮图像。如果组合颜色（光源）比 50% 灰色亮，则图像会变亮，就像变亮后一样。此效果可用于向图像添加高光。如果组合颜色（光源）比 50% 灰色深，则图像会变暗，就像乘法后一样。此效果可用于向图像添加暗区。应用纯黑色或纯白色会产生纯黑色或纯白色。
• soft-light 散射光。在此模式下，颜色会变暗或变亮，具体取决于组合的颜色。由此产生的效果类似于用聚光灯的模糊光线照亮图像。如果组合颜色（光源）比 50% 灰色亮，则图像会变亮，就像变亮后一样。如果组合颜色比 50% 灰色深，则图像会变暗，就像变暗后一样。应用纯黑色或纯白色会创建明显、较暗或较亮的区域，但纯黑色或纯白色将不起作用。
• difference 差异。在此模式下，将减去原色中的组合颜色或组合颜色中的原色，具体取决于哪种颜色具有较高的亮度值。与白色混合会反转原色的值，与黑色混合不需要任何更改。
• exclusion 异常。在此模式下，创建的效果类似于在“差异”模式下创建的效果，但具有较低的对比度。与白色混合会反转原色值。与黑色混合不会导致任何变化。
• hue 语气。在此模式下，使用原色的亮度和饱和度以及组合颜色的色调创建生成的颜色
• saturation 饱和。在此模式下，使用主色的亮度和色调以及组合颜色的饱和度创建生成的颜色。
• color 颜色。生成的颜色是使用原色的亮度以及组合颜色的色调和饱和度创建的。此模式保留图像中的灰度级别，可用于为单色图像着色并向彩色图像添加色调。
• luminosity 亮度。在此模式下，使用主色的色调和饱和度以及组合颜色的亮度创建生成的颜色。此模式创建颜色反转效果。