CSS mix-blend-mode 属性

CSS mix-blend-mode 属性可用于指定两个元素的混合模式，从而达到特定的颜色效果。

语法

mix-blend-mode: <blend-mode>

其中，<blend-mode> 是取值为以下之一的标识符：

• normal
• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

示例

<div class="blend-mode-demo">
  <div class="blend-mode-box box1"></div>
  <div class="blend-mode-box box2"></div>
</div>

.blend-mode-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.blend-mode-box {
  width: 150px;
  height: 150px;
  mix-blend-mode: difference;
}

.box1 {
  background-color: yellow;
}

.box2 {
  background-color: blue;
}

效果展示

使用建议

• normal 混合模式为默认值，表示两个元素不混合，各自呈现完整的背景色。
• multiply 混合模式可用于将两个元素的颜色叠加在一起，产生更暗深的颜色。
• screen 混合模式可用于将两个元素的颜色叠加在一起，产生更亮丽的颜色。
• overlay 混合模式可用于将两个元素的颜色混合在一起，产生更平衡的颜色。
• darken 混合模式可用于将两个元素中较暗的颜色保留，较亮的颜色被降低。
• lighten 混合模式可用于将两个元素中较亮的颜色保留，较暗的颜色被提高。
• color-dodge 混合模式可用于让第二个元素的颜色“透明”，让第一个元素的颜色更亮丽。
• color-burn 混合模式可用于让第二个元素的颜色“透明”，让第一个元素的颜色更暗深。
• hard-light 混合模式可用于将两个元素的颜色混合在一起，产生更强烈的效果。
• soft-light 混合模式可用于将两个元素的颜色混合在一起，产生更柔和的效果。
• difference 混合模式可用于将第一个元素的颜色减去第二个元素的颜色，产生更深的效果。
• exclusion 混合模式可用于将第一个元素的颜色减去第二个元素的颜色，产生更柔和的效果。
• hue 混合模式可用于将第一个元素的颜色的色调应用到第二个元素的颜色上，产生更整齐的颜色。
• saturation 混合模式可用于将两个元素的颜色混合在一起，产生更饱和的效果。
• color 混合模式可用于将两个元素的颜色混合在一起，产生更平衡的颜色。
• luminosity 混合模式可用于将第一个元素的亮度应用到第二个元素的颜色上，产生更柔和的颜色。

总结

CSS mix-blend-mode 属性可用于将两个元素的颜色混合在一起，产生各种特殊的效果。通过 blend-mode 取值的不同，可控制颜色的饱和度、明暗度、色调等，更方便地实现各种创意性的设计效果。