mix-blend-mode

Avatar of Robin Rendle
Robin Rendle on

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

mix-blend-mode 属性定义元素内容如何与其背景混合。 例如,<h1> 的文本可以以有趣的方式与后面的背景混合。

.blend {
  mix-blend-mode: exclusion;
}

在上面的示例中,内容已通过 mix-blend-mode 修改,因此文本的颜色被排除在背景之外。 这只是此属性的众多值之一。

Chrome 58+ 中存在一个问题,即 mix-blend-mode 不会在设置为透明 的元素上呈现。 该问题已在 Chrome 中标记为 问题 711955,截至撰写本文时已分配。 同时,一个简单的解决方法是为 body 元素分配白色(或实际上任何)背景颜色。

  • initial: 属性的默认设置,不设置混合模式。
  • inherit: 元素将从其父元素继承混合模式。
  • unset: 从元素中删除当前混合模式。
  • <blend-mode>: 这是下面混合模式之一的属性
  • normal: 此属性不应用任何混合。
  • multiply: 元素与背景相乘并替换背景颜色。 结果颜色始终与背景颜色一样深。
  • screen: 将背景与内容相乘,然后对结果进行取反。 这将导致比 background-color 更亮的内容。
  • overlay: 根据背景颜色将内容相乘或进行屏幕混合。 这是硬光混合模式的逆运算。
  • darken: 如果内容更暗,背景将被内容替换,否则保持不变。
  • lighten: 如果内容更亮,背景将被内容替换。
  • color-dodge: 此属性会使背景颜色变亮以反映内容的颜色。
  • color-burn: 此属性会使背景颜色变暗以反映内容的自然颜色。
  • hard-light: 根据内容的颜色,此属性会对其进行屏幕混合或相乘。
  • soft-light: 根据内容的颜色,此属性会使其变暗或变亮。
  • difference: 此属性将两个颜色中较暗的颜色从较亮的颜色中减去。
  • exclusion: 与 difference 类似,但对比度更低。
  • hue: 创建一个颜色,该颜色的色相与内容的色相相结合,饱和度和亮度与背景的饱和度和亮度相结合。
  • saturation: 创建一个颜色,该颜色的饱和度与内容的饱和度相结合,色相和亮度与背景的色相和亮度相结合。
  • color: 创建一个颜色,该颜色的色相和饱和度与内容的色相和饱和度相结合,亮度与背景的亮度相结合。
  • luminosity: 创建一个颜色,该颜色的亮度与内容的亮度相结合,色相和饱和度与背景的色相和饱和度相结合。 这是 color 属性的逆运算。

值得注意的是,设置除 normal 以外的混合模式将生成一个新的堆叠上下文,然后必须将其与包含该元素的堆叠上下文混合。

下面演示了这些值的效果

更多信息

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
413279TP

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712718.0