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
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
background-blend-mode
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
属性
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
如果您将 isolation
属性的值为isolate
系统会创建新的堆叠上下文
这样可以防止它与背景幕图层混合
正如您在 Z-index 模块中所了解到的,创建新的堆叠上下文时,
该层将成为基础层。
这意味着,系统将不再应用父级混合模式
但是已设置 isolation: isolate
的元素内部元素仍可以混合。
请注意,这不适用于 background-blend-mode
因为 background 属性已被隔离。
检查您的理解情况
测试您对混合模式的掌握情况
以下哪些是 CSS 混合模式?
如果您想以不同方式混合不同的颜色,则需要哪种混合模式样式?