混合模式

CSS 播客 - 024：混合模式

双色调是一种流行的摄影色彩处理方式 这使得图片看起来仅由两种对比鲜明的颜色组成： 一个用于高光，另一个用于低光。 那么如何使用 CSS 实现这一目标呢？

利用混合模式以及您学到的其他技术 例如过滤条件和 伪元素 - 您可以将此效果应用于任何图片。

什么是混合模式？

混合模式通常用于 Photoshop 等设计工具 通过混合两层或多层的颜色来产生合成效果。 通过改变颜色的混合方式，您可以实现非常有趣的视觉效果。 您还可以使用混合模式作为实用工具 例如将背景为白色的图片隔离出来 呈现透明背景

您可以利用 CSS 工具 使用设计工具中提供的大多数混合模式 使用 mix-blend-mode 或 background-blend-mode 属性。 mix-blend-mode 会对整个元素应用混合效果 而 background-blend-mode 则会对元素的背景应用混合效果。

当一个元素具有多个背景时，您可以使用 background-blend-mode 希望它们能够融为一体

mix-blend-mode 会影响整个元素， 包括其伪元素。 第一个应用场景是双色调图片的初始示例， 其中，颜色层通过伪元素应用到元素。

混合模式分为两类：可分离和不可分离。 可分离的混合模式会考虑每个颜色成分， 例如 RGB。 不可分隔的混合模式会考虑所有颜色成分。

浏览器兼容性

mix-blend-mode

浏览器支持

  • Chrome：41。 <ph type="x-smartling-placeholder">
  • Edge：79。 <ph type="x-smartling-placeholder">
  • Firefox：32. <ph type="x-smartling-placeholder">
  • Safari：8. <ph type="x-smartling-placeholder">

来源

background-blend-mode

浏览器支持

  • Chrome：35。 <ph type="x-smartling-placeholder">
  • Edge：79。 <ph type="x-smartling-placeholder">
  • Firefox：30。 <ph type="x-smartling-placeholder">
  • Safari：8. <ph type="x-smartling-placeholder">

来源

可分离的混合模式

正常

这是默认的混合模式，不会对元素与其他元素的混合方式进行任何更改。

调节系数

multiply 混合模式就像将多个透明效果堆叠在一起一样。 白色像素将显示为透明 而黑色像素则会显示为黑色 介于两者之间的任何元素都会乘以其亮度（光）值。 也就是说，光会变亮，变暗， 颜色较深，往往会产生较深的结果。

.my-element {
  mix-blend-mode: multiply;
}

过滤

使用 screen 会乘以 light 值，这对 multiply 是相反的， 而且往往会制作出更明亮的效果

.my-element {
  mix-blend-mode: screen;
}

重叠式广告

此混合模式 overlay - 结合了 multiply 和 screen。 基础深色会变深，基础浅色会变浅。 中等颜色（例如 50% 灰色）不会受到影响。

.my-element {
  mix-blend-mode: overlay;
}

把屏幕调暗

darken 混合模式会比较源图片和背景图片的暗色亮度 然后选择两者中最暗的 具体方法是比较 RGB 值而不是亮度（就像 multiply 和 screen 一样）。 每个颜色通道。 使用 darken 和 lighten 时，系统经常会根据此比较过程创建新的颜色值。

.my-element {
  mix-blend-mode: darken;
}

Lighten

使用 lighten 的效果与 darken 完全相反。

.my-element {
  mix-blend-mode: lighten;
}

颜色减淡

如果您使用 color-dodge，它会使背景颜色变浅，以反映源颜色。 在此模式下，纯黑色看不到任何效果。

.my-element {
  mix-blend-mode: color-dodge;
}

颜色加深

color-burn 混合模式与 multiply 混合模式非常相似， 但会增加对比度，从而使中色调更加饱和，并减少高光。

.my-element {
  mix-blend-mode: color-burn;
}

强光

使用 hard-light 可以形成鲜明的对比。 此混合模式要么进行屏幕设置，要么将亮度值相乘。 如果像素值比 50% 灰度浅，图片就会变亮； 就像经过了筛查一样。如果颜色更深，则颜色成倍增加。

.my-element {
  mix-blend-mode: hard-light;
}

柔光

soft-light 混合模式是 overlay 的粗略版本。 它的工作原理大致相同，但对比度较低。

.my-element {
  mix-blend-mode: soft-light;
}

差额

要理解 difference 的工作原理，有点像负片。 difference 混合模式采用每个像素的差值。 反色光线。 如果颜色值相同，它们将变为黑色。 值的差异将反转。

.my-element {
  mix-blend-mode: difference;
}

排除对象

使用 exclusion 与 difference 非常相似， 但对于相同的像素，它不会返回黑色 它将返回 50% 的灰色，从而使输出更柔和，对比度也更低。

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

不可分隔的混合模式

您可以将这些混合模式视为 HSL 颜色组件。 每个元素都从主动层中获取一个特定的组成部分值，并将其与其他组成部分值混合。

色相

hue 混合模式会采用源颜色的色调 并将其应用于背景颜色的饱和度和亮度

.my-element {
  mix-blend-mode: hue;
}

饱和度

其工作原理类似于 hue， 但如果使用 saturation 作为混合模式，则会应用源颜色的饱和度 调整背景颜色和亮度

.my-element {
  mix-blend-mode: saturation;
}

颜色

color 混合模式会根据源颜色的色调和饱和度来创建颜色 和背景颜色的亮度

.my-element {
  mix-blend-mode: color;
}

亮度

最后，luminosity 是 color 的反函数。 它会根据源颜色的亮度以及背景色的色调和饱和度来创建一种颜色。

.my-element {
  mix-blend-mode: luminosity;
}

isolation 属性

浏览器支持

  • Chrome：41。 <ph type="x-smartling-placeholder">
  • Edge：79。 <ph type="x-smartling-placeholder">
  • Firefox：36。 <ph type="x-smartling-placeholder">
  • Safari：8. <ph type="x-smartling-placeholder">

来源

如果您将 isolation 属性的值为isolate 系统会创建新的堆叠上下文 这样可以防止它与背景幕图层混合 正如您在 Z-index 模块中所了解到的，创建新的堆叠上下文时， 该层将成为基础层。 这意味着，系统将不再应用父级混合模式 但是已设置 isolation: isolate 的元素内部元素仍可以混合。

请注意，这不适用于 background-blend-mode 因为 background 属性已被隔离。

检查您的理解情况

测试您对混合模式的掌握情况

以下哪些是 CSS 混合模式？

差额
🎉
Lighten
🎉
调亮
再试一次！
Dullen
再试一次！
调节系数
🎉
重叠式广告
🎉

如果您想以不同方式混合不同的颜色，则需要哪种混合模式样式？

可分离
这些混合模式具有针对特定颜色通道的效果
不可分割
请重试，不可分隔无法感知颜色通道