混合模式 css_CSS中的混合模式：颜色理论和实际应用

混合模式 css

学习CSS：完整指南

无论您是刚刚开始使用基础知识还是想探索更高级CSS，我们都已构建了完整的指南来帮助您学习 CSS。

混合模式

如果您是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之外的所有浏览器均支持 ），则第一个背景图像将被视为源层，之后添加的任何图像都将被视为位于其下方的背景层。

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

div {background: url(img/pattern.png), url(img/jellyfish.jpg),  #f07e32 ;
}

这给了我们：

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

div {background: url(img/pattern.png), url(img/jellyfish.jpg),  #f07e32 ;background-blend-mode: screen;
}

这是使用这些样式的两个div，一个没有混合模式，第二个有：

第二种混合模式类型mix-blend-mode允许将独立的元素混合在一起。 规范对实现有更具体的说明，但是混合发生在“堆栈上下文”中。

当我们使用mix-blend-mode ，会发生这种情况，尝试获取同一元素内的背景图像和颜色进行混合（很少）：

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

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

可分离的混合模式

让我们看看可用的混合模式，方法是检查所用的公式，然后将每个模型应用于水母上方的红色圆圈。

屏幕：

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

屏幕以在同一屏幕上同时投影多张照片的概念命名。 所得颜色始终至少与任何一个混合层一样浅。

变暗：

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

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

减轻：

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

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

颜色闪避：

if(Cb == 0)B(Cb, Cs) = 0
else if(Cs == 1)B(Cb, Cs) = 1
elseB(Cb, Cs) = min(1, Cb / (1 - Cs))

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

色彩燃烧：

if(Cb == 1)B(Cb, Cs) = 1
else if(Cs == 0)B(Cb, Cs) = 0
elseB(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

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

强光：

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

将“乘”应用于较浅的颜色，将“屏幕”应用于较深的颜色。 本质上，“强光”与“覆盖”相反，我们将在后面讨论。

覆盖：

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

在浅色上应用“屏幕”，在深色上应用“乘”； 与“强光”相同，但函数的参数相反。

柔光：

if(Cs <= 0.5)B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)elseB(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)
withif(Cb <= 0.25)D(Cb) = ((16 * Cb - 12) x Cb + 4) x CbelseD(Cb) = sqrt(Cb)

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

在该算法中，我们看到基于颜色中存在的蓝色值在with子句中设置的辅助函数D 最终结果通常比“覆盖”效果柔和得多。

区别：

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

差取两种颜色之间的绝对差值，这会产生负片效果。

排除：

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

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

不可分离的混合模式

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

重要说明： Safari的任何版本均不支持带有mix-blend-mode或background-blend-mode “色相”，“饱和度”，“颜色”或“亮度”混合background-blend-mode 。

ClipColor(C)l = Lum(C)n = min(Cred, Cgreen, Cblue)x = max(Cred, Cgreen, Cblue)if n < 0.0Cred = l + (((Cred - l) * l) / (l - n))Cgreen = l + (((Cgreen - l) * l) / (l - n))Cblue = l + (((Cblue - l) * l) / (l - n))if x > 1.0Cred = l + (((Cred - l) * (1 - l)) / (x - l))Cgreen = l + (((Cgreen - l) * (1 - l)) / (x - l))Cblue = l + (((Cblue - l) * (1 - l)) / (x - l))return CSetLum(C, l)d = l - Lum(C)Cred = Cred + dCgreen = Cgreen + dCblue = Cblue + dreturn ClipColor(C)Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)

注意， min ， mid和max实用程序函数是指最小值，中间值和最大值。 （中间值不是这三个值的平均值。）值Cred ， Cgreen和Cblue表示颜色C存在的红色，绿色和蓝色值。

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

色调：

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

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

饱和：

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

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

颜色：

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

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

亮度：

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

此模式将源层的亮度与背景层的色相和饱和度一起应用。

结论

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

随着浏览器继续增加对混合模式的支持，您将怎么办？

翻译自: https://webdesign.tutsplus.com/tutorials/blending-modes-in-css-color-theory-and-practical-application--cms-25201

混合模式 css

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！