这些函数与 Photoshop、Fireworks 或 GIMP 等图像编辑器中的混合模式相似(尽管不一定完全相同)，因此您可以使用它们使 CSS 颜色与图像匹配。

1、multiply() 正片叠底

将两种颜色相乘。将两种颜色的对应 RGB 通道分别相乘，然后除以 255。结果会得到一种更深的颜色。

语法

multiply(@color1, @color2);

• @color1：要相乘的颜色。
• @color2：要相乘的颜色。

示例

multiply(#ff6600, #000000);

#ff6600 * #000000 → #000000

multiply(#ff6600, #333333);

#ff6600 * #333333 → #331400

multiply(#ff6600, #666666);

#ff6600 * #666666 → #662900

multiply(#ff6600, #999999);

#ff6600 * #999999 → #993d00

multiply(#ff6600, #cccccc);

#ff6600 * #cccccc → #cc5200

multiply(#ff6600, #ffffff);

#ff6600 * #ffffff → #ff6600

multiply(#ff6600, #ff0000);

#ff6600 * #ff0000 → #ff0000

multiply(#ff6600, #00ff00);

#ff6600 * #00ff00 → #006600

multiply(#ff6600, #0000ff);

#ff6600 * #0000ff → #000000

2、screen 滤色

与multiply()函数效果相反，结果会得到一种更亮的颜色。

语法

screen(@color1, @color2);

• @color1：颜色 1。
• @color2：颜色 2。

其计算结果为：result = 1 − ( 1 − @color1 ) × ( 1 − @color2 )

示例

screen(#ff6600, #000000);

#ff6600 + #000000 → #ff6600

screen(#ff6600, #333333);

#ff6600 + #333333 → #ff8533

screen(#ff6600, #666666);

#ff6600 + #666666 → #ffa366

screen(#ff6600, #999999);

#ff6600 + #999999 → #ffc299

screen(#ff6600, #cccccc);

#ff6600 + #cccccc → #ffe0cc

screen(#ff6600, #ffffff);

#ff6600 + #ffffff → #ffffff

screen(#ff6600, #ff0000);

#ff6600 + #ff0000 → #ff6600

screen(#ff6600, #00ff00);

#ff6600 + #00ff00 → #ffff00

screen(#ff6600, #0000ff);

#ff6600 + #0000ff → #ff66ff

3、overlay() 叠加

结合了multiply和screen的效果。根据条件使亮色通道更亮，暗色通道更暗。

overlay() 是 Less 提供的一个颜色混合函数，它结合了 multiply（正片叠底） 和 screen（滤色） 两种混合模式的效果，根据基色的亮度来决定使用哪种混合方式。

• 如果基色（第一个颜色）的亮度 < 50%，则使用 multiply 模式

• 如果基色（第一个颜色）的亮度 ≥ 50%，则使用 screen 模式

这使得 overlay 能够增强对比度，保留高光和阴影。

语法

overlay(@color1, @color2);

• @color1：基色（决定混合模式的选择）
• @color2：混合色

示例

overlay(#ff6600, #000000);

#ff6600 + #000000 → #ff0000

overlay(#ff6600, #333333);

#ff6600 + #333333 → #ff2900

overlay(#ff6600, #666666);

#ff6600 + #666666 → #ff5200

overlay(#ff6600, #999999);

#ff6600 + #999999 → #ff7a00

overlay(#ff6600, #cccccc);

#ff6600 + #cccccc → #ffa300

overlay(#ff6600, #ffffff);

#ff6600 + #ffffff → #ffcc00

overlay(#ff6600, #ff0000);

#ff6600 + #ff0000 → #ff0000

overlay(#ff6600, #00ff00);

#ff6600 + #00ff00 → #ffcc00

overlay(#ff6600, #0000ff);

#ff6600 + #0000ff → #ff0000

4、softlight() 柔光

与overlay函数类似，但避免纯黑色产生纯黑色结果，以及纯白色产生纯白色结果。

softlight() 类似于 overlay()，但对比度更低，效果更柔和。它会根据混合色的亮度来轻微地加深或减淡基色：

• 混合色 > 50% 灰度时：减淡基色（类似 screen 但更柔和）
• 混合色 < 50% 灰度时：加深基色（类似 multiply 但更柔和）
• 混合色 = 50% 灰度时：不产生变化

语法

softlight(@base, @blend);

• @base: 基色（被混合的颜色）
• @blend: 混合色（决定混合效果的颜色）

示例

softlight(#ff6600, #000000);

#ff6600 + #000000 → #ff2900

softlight(#ff6600, #333333);

#ff6600 + #333333 → #ff4100

softlight(#ff6600, #666666);

#ff6600 + #666666 → #ff5a00

softlight(#ff6600, #999999);

#ff6600 + #999999 → #ff7200

softlight(#ff6600, #cccccc);

#ff6600 + #cccccc → #ff8a00

softlight(#ff6600, #ffffff);

#ff6600 + #ffffff → #ffa100

softlight(#ff6600, #ff0000);

#ff6600 + #ff0000 → #ff2900

softlight(#ff6600, #00ff00);

#ff6600 + #00ff00 → #ffa100

softlight(#ff6600, #0000ff);

#ff6600 + #0000ff → #ff2900

5、hardlight() 强光

与overlay函数类似，但避免纯黑色产生纯黑色结果，以及纯白色产生纯白色结果。

基本特点

hardlight() 混合模式的特点是：

• 根据混合色（而非基色）的亮度决定使用 multiply 还是 screen 运算
• 产生比 overlay() 更强烈的对比效果
• 适合创建高对比度的颜色混合效果

语法

hardlight(@base, @blend);

• @base: 基色（被混合的颜色）
• @blend: 混合色（决定混合效果的颜色）

示例

hardlight(#ff6600, #000000);

#ff6600 + #000000 → #000000

hardlight(#ff6600, #333333);

#ff6600 + #333333 → #662900

hardlight(#ff6600, #666666);

#ff6600 + #666666 → #cc5200

hardlight(#ff6600, #999999);

#ff6600 + #999999 → #ff8533

hardlight(#ff6600, #cccccc);

#ff6600 + #cccccc → #ffc299

hardlight(#ff6600, #ffffff);

#ff6600 + #ffffff → #ffffff

hardlight(#ff6600, #ff0000);

#ff6600 + #ff0000 → #ff0000

hardlight(#ff6600, #00ff00);

#ff6600 + #00ff00 → #00ff00

hardlight(#ff6600, #0000ff);

#ff6600 + #0000ff → #0000ff

6、difference() 差值

difference() 是 Less 预处理器中的一个颜色混合函数，它实现了与 Photoshop 中 差值(Difference) 混合模式相同的效果。这种混合模式会计算两个颜色之间的绝对差异，产生高对比度的反转效果。

基本概念

difference() 混合模式的特点是：

• 计算两个颜色通道值的绝对差
• 产生高对比度的颜色反转效果
• 与黑色混合不产生变化
• 与白色混合产生完全反相效果
• 常用于创建强烈的视觉对比和特殊效果

语法

difference(@color1, @color2);

• @color1：基色（被比较的颜色）
• @color2：比较色（用于计算差值的颜色）

示例

difference(#ff6600, #000000);

#ff6600 - #000000 → #ff6600

difference(#ff6600, #333333);

#ff6600 - #333333 → #cc3333

difference(#ff6600, #666666);

#ff6600 - #666666 → #990066

difference(#ff6600, #999999);

#ff6600 - #999999 → #663399

difference(#ff6600, #cccccc);

#ff6600 - #cccccc → #3366cc

difference(#ff6600, #ffffff);

#ff6600 - #ffffff → #0099ff

difference(#ff6600, #ff0000);

#ff6600 - #ff0000 → #006600

difference(#ff6600, #00ff00);

#ff6600 - #00ff00 → #ff9900

difference(#ff6600, #0000ff);

#ff6600 - #0000ff → #ff66ff

7、exclusion() 排除

exclusion() 是 Less 预处理器中的一个颜色混合函数，它实现了与 Photoshop 中 排除(Exclusion) 混合模式相同的效果。这种混合模式会产生比 difference() 更柔和的反差效果。

特点

exclusion() 混合模式的特点是：

• 产生中等对比度的反转效果
• 比 difference() 更柔和
• 混合色为 50%灰色时对基色影响最小
• 常用于创建特殊的视觉特效

计算方式

exclusion() 对每个 RGB 通道单独计算：result = @color1 + @color2 - 2 * @color1 * @color2;
或者等效于：result = screen(@color1, @color2) - multiply(@color1, @color2);

语法

exclusion(@color1, @color2);

• @color1：基色（被混合的颜色）
• @color2：混合色（决定混合效果的颜色）

示例

exclusion(#ff6600, #000000);

#ff6600 + #000000 → #ff6600

exclusion(#ff6600, #333333);

#ff6600 + #333333 → #cc7033

exclusion(#ff6600, #666666);

#ff6600 + #666666 → #997a66

exclusion(#ff6600, #999999);

#ff6600 + #999999 → #668599

exclusion(#ff6600, #cccccc);

#ff6600 + #cccccc → #338fcc

exclusion(#ff6600, #ffffff);

#ff6600 + #ffffff → #0099ff

exclusion(#ff6600, #ff0000);

#ff6600 + #ff0000 → #006600

exclusion(#ff6600, #00ff00);

#ff6600 + #00ff00 → #ff9900

exclusion(#ff6600, #0000ff);

#ff6600 + #0000ff → #ff66ff

8、average() 平均

average() 是 Less 预处理器中的一个颜色混合函数，它实现了与 Photoshop 中 平均(Average) 混合模式相同的效果。这种混合模式会计算两个颜色的 算术平均值 来实现简单的颜色混合效果。

基本概念

average() 函数的特点：

• 计算两个颜色的简单平均值
• 产生平滑的中间色
• 混合权重始终是 50%/50%
• 结果颜色总是位于两个输入颜色的中间点

语法

average(@color1, @color2);

• @color1：颜色 1
• @color2：颜色 2

计算规则

average() 函数的计算规则：

red = ( red( @color1 ) + red( @color2 ) ) / 2
green = ( green( @color1 ) + green( @color2 ) ) / 2
blue = ( blue( @color1 ) + blue( @color2 ) ) / 2

示例

average(#ff6600, #000000);

#ff6600 + #000000 → #803300

average(#ff6600, #333333);

#ff6600 + #333333 → #994d1a

average(#ff6600, #666666);

#ff6600 + #666666 → #b36633

average(#ff6600, #999999);

#ff6600 + #999999 → #cc804d

average(#ff6600, #cccccc);

#ff6600 + #cccccc → #e69966

average(#ff6600, #ffffff);

#ff6600 + #ffffff → #ffb380

average(#ff6600, #ff0000);

#ff6600 + #ff0000 → #ff3300

average(#ff6600, #00ff00);

#ff6600 + #00ff00 → #80b300

average(#ff6600, #0000ff);

#ff6600 + #0000ff → #803380

9、negation() 反相

negation() 是 Less 预处理器中一个不太常用但功能独特的颜色混合函数，它实现了类似 Photoshop 中反相(Negation)混合模式的效果。

基本概念

negation() 混合模式的特点：

• 产生比 difference() 更柔和的颜色反转效果
• 与白色混合会产生反相效果
• 与黑色混合会保持原色不变
• 适合创建特殊的视觉效果

语法

negation(@color1, @color2);

• @color1: 颜色 1。
• @color2: 颜色 2。

工作原理

对每个 RGB 通道计算：

result = 1 - |1 - @color1 - @color2|

示例

negation(#ff6600, #000000);

#ff6600 + #000000 → #ff6600

negation(#ff6600, #333333);

#ff6600 + #333333 → #cc9933

negation(#ff6600, #666666);

#ff6600 + #666666 → #99cc66

negation(#ff6600, #999999);

#ff6600 + #999999 → #66ff99

negation(#ff6600, #cccccc);

#ff6600 + #cccccc → #33cccc

negation(#ff6600, #ffffff);

#ff6600 + #ffffff → #0099cc

negation(#ff6600, #ff0000);

#ff6600 + #ff0000 → #006600

negation(#ff6600, #00ff00);

#ff6600 + #00ff00 → #ff9900

negation(#ff6600, #0000ff);

#ff6600 + #0000ff → #ff66ff

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24