冲浪网站优化 / Products Center

颜色混合函数

 

这些操作和图片编辑器（例如 Photoshop、Fireworks 或 GIMP）中的混合模式很类似（虽然不是完全一致），因此，你可以通过这些函数让 CSS 中的颜色与图片中的颜色相匹配。

multiply

分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算，然后再除以 255，输出结果是更深的颜色。（译注：对应Photoshop中的“变暗/正片叠底”。）

参数：
•color1: 颜色对象。
•color2: 颜色对象。

返回值： 颜色（color）

案例:
multiply(#ff6600, #000000);

ff6600000000000000
multiply(#ff6600, #333333);

ff6600333333331400
multiply(#ff6600, #666666);

ff6600666666662900
multiply(#ff6600, #999999);

ff6600999999993d00
multiply(#ff6600, #cccccc);

ff6600cccccccc5200
multiply(#ff6600, #ffffff);

ff6600ffffffff6600
multiply(#ff6600, #ff0000);

ff6600ff0000ff0000
multiply(#ff6600, #00ff00);

ff660000ff00006600
multiply(#ff6600, #0000ff);

ff66000000ff000000

screen

与 multiply 函数效果相反，输出结果是更亮的颜色。（译注：对应Photoshop中的“变亮/滤色”。）

参数：
•color1: 颜色对象。
•color2: 颜色对象。

返回值： 颜色（color）

案例：
screen(#ff6600, #000000);

ff6600000000ff6600
screen(#ff6600, #333333);

ff6600333333ff8533
screen(#ff6600, #666666);

ff6600666666ffa366
screen(#ff6600, #999999);

ff6600999999ffc299
screen(#ff6600, #cccccc);

ff6600ccccccffe0cc
screen(#ff6600, #ffffff);

ff6600ffffffffffff
screen(#ff6600, #ff0000);

ff6600ff0000ff6600
screen(#ff6600, #00ff00);

ff6600999999ffff00
screen(#ff6600, #0000ff);

ff6600999999ff66ff

overlay

结合 multiply 与 screen 两个函数的效果，令浅的颜色变得更浅，深的颜色变得更深。（译注：对应 Photoshop 中的“叠加”。）注意：输出结果由第一个颜色参数决定。

参数：
•color1: 基准颜色对象。也就是用以确定最终结果是浅些还是深些的参考色。
•color2: 颜色对象。

返回值： 颜色（color）

案例：
overlay(#ff6600, #000000);

ff6600000000ff0000
overlay(#ff6600, #333333);

ff6600333333ff2900
overlay(#ff6600, #666666);

ff6600666666ff5200
overlay(#ff6600, #999999);

ff6600999999ff7a00
overlay(#ff6600, #cccccc);

ff6600ccccccffa300
overlay(#ff6600, #ffffff);

ff6600ffffffffcc00
overlay(#ff6600, #ff0000);

ff6600ff0000ff0000
overlay(#ff6600, #00ff00);

ff660000ff00ffcc00
overlay(#ff6600, #0000ff);

ff66000000ffff0000

softlight

与 overlay 函数效果相似，只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色。（译注：对应Photoshop中的“柔光”。）

参数：
•color1: 混合色（光源）。
•color2: 被混合的颜色。

返回值： 颜色（color）

案例：
softlight(#ff6600, #000000);

ff6600000000ff2900
softlight(#ff6600, #333333);

ff6600333333ff4100
softlight(#ff6600, #666666);

ff6600666666ff5a00
softlight(#ff6600, #999999);

ff6600999999ff7200
softlight(#ff6600, #cccccc);

ff6600ccccccff8a00
softlight(#ff6600, #ffffff);

ff6600ffffffffa100
softlight(#ff6600, #ff0000);

ff6600ff0000ff2900
softlight(#ff6600, #00ff00);

ff660000ff00ffa100
softlight(#ff6600, #0000ff);

ff66000000ffff2900

hardlight

与 overlay 函数效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，而不是第一个颜色参数决定。（译注：对应Photoshop中的“强光/亮光/线性光/点光”。）

参数：
•color1: 混合色（光源）。
•color2: 基准色对象。它决定最终结果是亮些还是暗些。

返回值： 颜色（color）

案例：
hardlight(#ff6600, #000000);

ff6600000000000000
hardlight(#ff6600, #333333);

ff6600333333662900
hardlight(#ff6600, #666666);

ff6600666666cc5200
hardlight(#ff6600, #999999);

ff6600999999ff8533
hardlight(#ff6600, #cccccc);

ff6600ccccccff2900
hardlight(#ff6600, #ffffff);

ff6600ffffffffffff
hardlight(#ff6600, #ff0000);

ff6600ff0000ff0000
hardlight(#ff6600, #00ff00);

ff660000ff0000ff00
hardlight(#ff6600, #0000ff);

ff66000000ff0000ff

difference

从第一个颜色值中减去第二个（分别计算 RGB 三种颜色通道），输出结果是更深的颜色。如果结果为负值则被反转。如果减去的颜色是黑色则不做改变；减去白色将得到颜色反转。（译注：对应Photoshop中的“差值/排除”。）

参数：
•color1: 被减的颜色对象。
•color2: 减去的颜色对象。

返回值： 颜色（color）

案例：
difference(#ff6600, #000000);

ff6600000000ff6600
difference(#ff6600, #333333);

ff6600333333cc3333
difference(#ff6600, #666666);

ff6600666666990066
difference(#ff6600, #999999);

ff6600999999663399
difference(#ff6600, #cccccc);

ff6600cccccc3366cc
difference(#ff6600, #ffffff);

ff6600ffffff0099ff
difference(#ff6600, #ff0000);

ff6600ff0000006600
difference(#ff6600, #00ff00);

ff660000ff00ff9900
difference(#ff6600, #0000ff);

ff66000000ffff66ff

exclusion

效果与 difference() 函数效果相似，只是输出结果对比度更小 (lower contrast)。（译注：对应Photoshop中的“差值/排除”。）

参数：
•color1: 被减的颜色对象。
•color2: 减去的颜色对象。

返回值： 颜色（color）

案例：
exclusion(#ff6600, #000000);

ff6600000000ff6600
exclusion(#ff6600, #333333);

ff6600333333cc7033
exclusion(#ff6600, #666666);

ff6600666666997a66
exclusion(#ff6600, #999999);

ff6600999999668599
exclusion(#ff6600, #cccccc);

ff6600cccccc338fcc
exclusion(#ff6600, #ffffff);

ff6600ffffff0099ff
exclusion(#ff6600, #ff0000);

ff6600ff0000006600
exclusion(#ff6600, #00ff00);

ff660000ff00ff9900
exclusion(#ff6600, #0000ff);

ff66000000ffff66ff

average

分别对 RGB 的三种颜色值取平均值，然后输出结果。

参数：
•color1: 颜色对象。
•color2: 颜色对象。

返回值： 颜色（color）

案例：
average(#ff6600, #000000);

ff6600000000803300
average(#ff6600, #333333);

ff6600333333994d1a
average(#ff6600, #666666);

ff6600666666b36633
average(#ff6600, #999999);

ff6600999999cc804d
average(#ff6600, #cccccc);

ff6600cccccce69966
average(#ff6600, #ffffff);

ff6600ffffffffb380
average(#ff6600, #ff0000);

ff6600ff0000ff3300
average(#ff6600, #00ff00);

ff660000ff0080b300
average(#ff6600, #0000ff);

ff66000000ff803380

negation

与 difference 函数效果相反。

输出结果是更亮的颜色。注意：效果 相反 不代表做加法运算。

参数：
•color1: 被减的颜色对象。
•color2: 减去的颜色对象。

返回值： 颜色（color）

案例：
negation(#ff6600, #000000);

ff6600000000ff6600
negation(#ff6600, #333333);

ff6600333333cc9933
negation(#ff6600, #666666);

ff660066666699cc66
negation(#ff6600, #999999);

ff660099999966ff99
negation(#ff6600, #cccccc);

ff6600cccccc33cccc
negation(#ff6600, #ffffff);

ff6600ffffff0099ff
negation(#ff6600, #ff0000);

ff6600ff0000006600
negation(#ff6600, #00ff00);

ff660000ff00ff9900
negation(#ff6600, #0000ff);

ff66000000ffff66ff。