混合模式

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

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

什么是混合模式?

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

您可以利用 CSS 工具 使用设计工具中提供的大多数混合模式 使用 mix-blend-modebackground-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 - 结合了 multiplyscreen。 基础深色会变深,基础浅色会变浅。 中等颜色(例如 50% 灰色)不会受到影响。

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

把屏幕调暗

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

.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;
}

排除对象

使用 exclusiondifference 非常相似, 但对于相同的像素,它不会返回黑色 它将返回 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;
}

亮度

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

.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
调节系数
差额

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

可分离
不可分割