颜色混合函数

这些操作与 Photoshop、Fireworks 或 GIMP 等图片编辑器中的混合模式类似（但不一定相同），因此你可以使用它们使 CSS 颜色与图片匹配。

multiply

将两种颜色相乘。 将两种颜色中每一种的相应 RGB 通道相乘，然后除以 255。 结果是颜色较深。

参数：

• color1: 颜色对象。
• color2: 颜色对象。

返回： color

示例:

multiply(#ff6600, #000000);

multiply(#ff6600, #333333);

multiply(#ff6600, #666666);

multiply(#ff6600, #999999);

multiply(#ff6600, #cccccc);

multiply(#ff6600, #ffffff);

multiply(#ff6600, #ff0000);

multiply(#ff6600, #00ff00);

multiply(#ff6600, #0000ff);

screen

做与 multiply 相反的事情。 结果是更亮的颜色。

参数：

• color1: 颜色对象。
• color2: 颜色对象。

返回： color

例子：

screen(#ff6600, #000000);

screen(#ff6600, #333333);

screen(#ff6600, #666666);

screen(#ff6600, #999999);

screen(#ff6600, #cccccc);

screen(#ff6600, #ffffff);

screen(#ff6600, #ff0000);

screen(#ff6600, #00ff00);

screen(#ff6600, #0000ff);

overlay

结合了 multiply 和 screen 的效果。 有条件地使亮通道更亮，使暗通道更暗。 注意: 条件的结果由第一个颜色参数决定。

参数：

• color1: 基色对象。 也是使结果更亮或更暗的决定色。
• color2: 要叠加的颜色对象。

返回： color

例子：

overlay(#ff6600, #000000);

overlay(#ff6600, #333333);

overlay(#ff6600, #666666);

overlay(#ff6600, #999999);

overlay(#ff6600, #cccccc);

overlay(#ff6600, #ffffff);

overlay(#ff6600, #ff0000);

overlay(#ff6600, #00ff00);

overlay(#ff6600, #0000ff);

softlight

与 overlay 类似，但避免纯黑导致纯黑，避免纯白导致纯白。

参数：

• color1: 要柔和地照亮另一个的颜色对象。
• color2: 要柔和变亮的颜色对象。

返回： color

例子：

softlight(#ff6600, #000000);

softlight(#ff6600, #333333);

softlight(#ff6600, #666666);

softlight(#ff6600, #999999);

softlight(#ff6600, #cccccc);

softlight(#ff6600, #ffffff);

softlight(#ff6600, #ff0000);

softlight(#ff6600, #00ff00);

softlight(#ff6600, #0000ff);

hardlight

与 overlay 相同，但颜色角色相反。

参数：

• color1: 要叠加的颜色对象。
• color2: 基色对象。 也是使结果更亮或更暗的决定色。

返回： color

例子：

hardlight(#ff6600, #000000);

hardlight(#ff6600, #333333);

hardlight(#ff6600, #666666);

hardlight(#ff6600, #999999);

hardlight(#ff6600, #cccccc);

hardlight(#ff6600, #ffffff);

hardlight(#ff6600, #ff0000);

hardlight(#ff6600, #00ff00);

hardlight(#ff6600, #0000ff);

difference

在逐个通道的基础上从第一种颜色中减去第二种颜色。 负值被反转。 减去黑色结果没有变化； 减去白色会导致颜色反转。

参数：

• color1: 用作被减数的颜色对象。
• color2: 用作减数的颜色对象。

返回： color

例子：

difference(#ff6600, #000000);

difference(#ff6600, #333333);

difference(#ff6600, #666666);

difference(#ff6600, #999999);

difference(#ff6600, #cccccc);

difference(#ff6600, #ffffff);

difference(#ff6600, #ff0000);

difference(#ff6600, #00ff00);

difference(#ff6600, #0000ff);

exclusion

与 difference 类似的效果，但对比度较低。

参数：

• color1: 用作被减数的颜色对象。
• color2: 用作减数的颜色对象。

返回： color

例子：

exclusion(#ff6600, #000000);

exclusion(#ff6600, #333333);

exclusion(#ff6600, #666666);

exclusion(#ff6600, #999999);

exclusion(#ff6600, #cccccc);

exclusion(#ff6600, #ffffff);

exclusion(#ff6600, #ff0000);

exclusion(#ff6600, #00ff00);

exclusion(#ff6600, #0000ff);

average

在每个通道 (RGB) 的基础上计算两种颜色的平均值。

参数：

• color1: 颜色对象。
• color2: 颜色对象。

返回： color

例子：

average(#ff6600, #000000);

average(#ff6600, #333333);

average(#ff6600, #666666);

average(#ff6600, #999999);

average(#ff6600, #cccccc);

average(#ff6600, #ffffff);

average(#ff6600, #ff0000);

average(#ff6600, #00ff00);

average(#ff6600, #0000ff);

negation

对 difference 执行相反的操作。

结果是更亮的颜色。 注意: 相反的效果并不意味着加法运算产生的反转效果。

参数：

• color1: 用作被减数的颜色对象。
• color2: 用作减数的颜色对象。

返回： color

例子：

negation(#ff6600, #000000);

negation(#ff6600, #333333);

negation(#ff6600, #666666);

negation(#ff6600, #999999);

negation(#ff6600, #cccccc);

negation(#ff6600, #ffffff);

negation(#ff6600, #ff0000);

negation(#ff6600, #00ff00);

negation(#ff6600, #0000ff);