北京网站建设：CSS中的混合模式：色彩理论与实际应用

2019.08.02 mf_web

195

如果您是Photoshop用户，您可能熟悉“混合模式”; 它们允许您以不同的方式组合图层，并且玩起来非常有趣。但是，CSS中的混合模式并不是普遍支持的，但它们肯定会在路上。

北京网站建设在本教程中，我们将学习混合模式的工作原理以及使用CSS实现混合模式的不同方法。

混合的基础知识

如果您从未遇到混合模式，它们的工作方式似乎有点难以捉摸。让我们分解吧。

“混合模式”实际上意味着什么？

多年来，设计软件已经提供了混合模式，但混合模式的概念实际上已经使用了很长时间，甚至在计算机发明之前。

混合模式的“混合”部分是指采用两种颜色并以某种方式组合它们以制作一种颜色。更准确地说，我们采用两个像素图并将它们混合在一起。

如何进行混合是混合模式的“模式”部分。这些颜色如何相互作用？因为我们正在使用数字空间，所以我们可以采用任何数学公式并将其应用于两个输入以获得输出。

未经处理的水母图像
未经处理的水母图像
同样的水母，上面放着一层橙色的固体
同样的水母有一个坚实的橙色层（我们的“源”）放在它上面
继承了应用了屏幕混合模式的橙色图层
这是我们的源图层，应用了“屏幕”混合模式

你做数学

如果您真的有野心勃勃，请查看W3C FX Task Force的官方合成文档，该文档解释了每种不同混合模式的数学实现。它演示了用于计算混合更多的公式。 

Cm = B（Cb，Cs）

  • 这里  Cm是混合后的最终颜色。 

  • B 指混合功能。 

  • 的Cb变量是背景颜色。 

  • 而Cs变量是源颜色。 

所有颜色均基于0-1比例，直接映射到rgb 0-255值。

有两种混合模式。第一个被认为是“不可分离的”，第二个（不出所料）被认为是“可分离的”。混合模式是否被认为是可分离的是由基础算法确定的。如果算法同等地处理每个单独的颜色通道（红色，绿色和蓝色），则认为它是不可分离的。如果它单独使用每个颜色通道，则认为它是可分离的。

所有混合模式可能只返回0到255范围内的颜色。任何方向上超出此范围的任何内容都将被剪切到该范围。当您在混合区域看到大面积的白色或黑色时，可能是因为这些区域被剪裁了。

CSS中可用的混合模式的类型

支持的CSS混合模式有两种不同的工作方式。调用第一种混合模式background-blend-mode。此属性允许您将一个元素内的所有背景相互混合。 

例如，如果您定义了多个背景图像（IE8以外的所有浏览器都支持），则第一个背景图像将被视为源图层，之后添加的任何图像将被视为背景图层，位于下方。 

添加背景颜色（必须在列表中的最后一个颜色）会在底部放置另一个图层。颜色将被视为背景图层，图像将被视为源图层。采用以下样式规则，例如：

1
2
3
4
五
6
div {
    background:
    url(img/pattern.png),
    url(img/jellyfish.jpg), 
    #f07e32 ;
}

这给了我们：

然后我们可以在混合中添加混合模式：

1
2
3
4
五
6
7
div {
    background:
    url(img/pattern.png),
    url(img/jellyfish.jpg), 
    #f07e32 ;
    background-blend-mode: screen;
}

辅助混合模式类型mix-blend-mode允许将独立元素混合在一起。规范更具体地说明了实现，但混合发生在“堆叠上下文”中。

这是当我们使用mix-blend-mode时尝试获取同一元素中的背景图像和颜色以进行混合（非常少）：

1
2
3
4
五
.my-overlay-element {
  background-color: #f07e32;
  background-image: url(img/jellyfish.jpg); // Note: This image will not be blended with the background color.
  mix-blend-mode: color-dodge;
}


下面，您可以找到一个用于探索给定混合模式效果的交互式演示。

可分离的混合模式

让我们看一下可用的混合模式，检查所用的配方，并将每一个应用到我们的水母上方的红色圆圈。

未应用混合模式

屏幕：

1
B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]

屏幕以在一个屏幕上同时投影多个照片曝光的概念命名。得到的颜色总是至少与混合层中的任何一个一样轻。

屏幕混合模式
屏幕混合模式

变暗：

1
B(Cb, Cs) = min(Cb, Cs)

选择两种颜色中较暗的颜色。

使混合模式变暗
使混合模式变暗

减轻：

1
B(Cb, Cs) = max(Cb, Cs)

选择两种颜色中较浅的颜色。

减轻混合模式
减轻混合模式

颜色闪避：

1
2
3
4
五
6
if(Cb == 0)
    B(Cb, Cs) = 0
else if(Cs == 1)
    B(Cb, Cs) = 1
else
    B(Cb, Cs) = min(1, Cb / (1 - Cs))

颜色减淡使背景颜色变浅以反映源颜色。

颜色躲闪混合模式
颜色躲闪混合模式

彩色烧伤：

1
2
3
4
五
6
if(Cb == 1)
    B(Cb, Cs) = 1
else if(Cs == 0)
    B(Cb, Cs) = 0
else
    B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

颜色灼伤会使背景颜色变暗，从而增加源和背景之间的对比度。

彩色燃烧混合模式
彩色燃烧混合模式

强光：

1
2
3
4
if(Cs <= 0.5)
    B(Cb, Cs) = Multiply(Cb, 2 x Cs)
else
    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)

在较浅的颜色上应用“倍增”，在较暗的颜色上应用“屏幕”。基本上，“强光”与“叠加”相反，我们将在下面看到。

硬光混合模式
硬光混合模式

覆盖：

1
B(Cb, Cs) = HardLight(Cs, Cb)

在较浅的颜色上应用“屏幕”，在较暗的颜色上“倍增”; 写作与“强光”相同，除非函数的参数反转。

叠加混合模式
叠加混合模式

柔光：

1
2
3
4
五
6
7
8
9
if(Cs <= 0.5)
        B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)
    else
        B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)
with
    if(Cb <= 0.25)
        D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb
    else
        D(Cb) = sqrt(Cb)

此混合模式在暗值上应用“乘法”变体，在较亮值上应用“屏幕”变体（类似于屏幕）。

在此算法中，我们看到根据颜色中存在的蓝色值D在with子句中设置的辅助函数。最终结果通常比“叠加”更柔和。

Sof光混合模式
Sof光混合模式

区别：

1
B(Cb, Cs) = | Cb - Cs |

差异采用两种颜色之间的绝对差值，这具有照片负片的效果。

差异混合模式
差异混合模式

排除：

1
B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs

排除模式具有与“差异”模式相同的基本效果，除了相似的颜色导致较低的对比度中间值（而不是较暗的值）。

排除混合模式
排除混合模式

不可分离的混合模式

“不可分离”混合模式利用一些额外功能，包括ClipColor功能，SetLum功能和Sat功能。 

重要提示： Safari浏览器的任何版本支持“色相”，“饱和度”，“色”，或“亮度”混合模式mix-blend-mode或background-blend-mode。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
ClipColor(C)
  l = Lum(C)
  n = min(Cred, Cgreen, Cblue)
  x = max(Cred, Cgreen, Cblue)
 
  if n < 0.0
    Cred = l + (((Cred - l) * l) / (l - n))
    Cgreen = l + (((Cgreen - l) * l) / (l - n))
    Cblue = l + (((Cblue - l) * l) / (l - n))
 
  if x > 1.0
 
    Cred = l + (((Cred - l) * (1 - l)) / (x - l))
    Cgreen = l + (((Cgreen - l) * (1 - l)) / (x - l))
    Cblue = l + (((Cblue - l) * (1 - l)) / (x - l))
 
  return C
 
SetLum(C, l)
  d = l - Lum(C)
  Cred = Cred + d
  Cgreen = Cgreen + d
  Cblue = Cblue + d
 
  return ClipColor(C)
 
Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)

请注意min，mid和max效用函数来引用到最小，中间和最大值。（中是不三个值的平均值。）的值Cred，Cgreen和Cblue指存在于颜色红，绿和蓝色的值C。

通过这些定义，我们现在可以查看不可分离的混合模式。

色调：

1
B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))

此模式将源图层的色调应用于背景颜色的亮度和饱和度。

Hue混合模式
Hue混合模式

饱和：

1
B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))

此模式与“色调”模式的作用相同，而是将前景的饱和度应用于色调和背景的亮度。

饱和度混合模式
饱和度混合模式

颜色：

1
B(Cb, Cs) = SetLum(Cs, Lum(Cb))

将前景的色调和饱和度应用于背景的亮度。

颜色混合模式
颜色混合模式

亮度：

1
B(Cb, Cs) = SetLum(Cb, Lum(Cs))

此模式将源图层的亮度应用于背景图层的色调和饱和度。

亮度混合模式
亮度混合模式

结论

CSS中的混合模式为设计和独特的美学体验提供了新的令人兴奋的灵活性。了解适用于每种可用混合模式的数学和颜色理论可为您提供更全面的工具集。

北京网站建设

相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

联系电话 400-6065-301
在线咨询

留言