编辑 "color-blending" 的 markdown 源
这些操作类似于(但不一定完全相同)Photoshop、Fireworks 或 GIMP 等图像编辑器中发现的混合模式,因此您可以使用它们使 CSS 颜色与图像匹配。
multiply
将两种颜色相乘。两个颜色的相应 RGB 通道相乘,然后除以 255。结果是一种较暗的颜色。
参数
color1
:颜色对象。
color2
:颜色对象。
返回:color
示例:
multiply(#ff6600, #000000);
![Color 3]()
multiply(#ff6600, #333333);
![Color 3]()
multiply(#ff6600, #666666);
![Color 3]()
multiply(#ff6600, #999999);
![Color 3]()
multiply(#ff6600, #cccccc);
![Color 3]()
multiply(#ff6600, #ffffff);
![Color 3]()
multiply(#ff6600, #ff0000);
![Color 3]()
multiply(#ff6600, #00ff00);
![Color 3]()
multiply(#ff6600, #0000ff);
![Color 3]()
滤色
与 multiply
相反。结果是一种较亮的颜色。
参数
color1
:颜色对象。
color2
:颜色对象。
返回:color
示例
screen(#ff6600, #000000);
![Color 3]()
screen(#ff6600, #333333);
![Color 3]()
screen(#ff6600, #666666);
![Color 3]()
screen(#ff6600, #999999);
![Color 3]()
screen(#ff6600, #cccccc);
![Color 3]()
screen(#ff6600, #ffffff);
![Color 3]()
screen(#ff6600, #ff0000);
![Color 3]()
screen(#ff6600, #00ff00);
![Color 3]()
screen(#ff6600, #0000ff);
![Color 3]()
叠加
结合了 multiply
和 screen
的效果。有条件地使亮通道变亮,使暗通道变暗。注意:条件的结果由第一个颜色参数决定。
参数
color1
:一个基本颜色对象。也是决定结果变亮还是变暗的决定因素颜色。
color2
:一个要叠加的颜色对象。
返回:color
示例
overlay(#ff6600, #000000);
![Color 3]()
overlay(#ff6600, #333333);
![Color 3]()
overlay(#ff6600, #666666);
![Color 3]()
overlay(#ff6600, #999999);
![Color 3]()
overlay(#ff6600, #cccccc);
![Color 3]()
overlay(#ff6600, #ffffff);
![Color 3]()
overlay(#ff6600, #ff0000);
![Color 3]()
overlay(#ff6600, #00ff00);
![Color 3]()
overlay(#ff6600, #0000ff);
![Color 3]()
柔光
与 overlay
类似,但避免纯黑色导致纯黑色,纯白色导致纯白色。
参数
color1
:一个用于柔光另一个的颜色对象。
color2
:一个要被柔光的颜色对象。
返回:color
示例
softlight(#ff6600, #000000);
![Color 3]()
softlight(#ff6600, #333333);
![Color 3]()
softlight(#ff6600, #666666);
![Color 3]()
softlight(#ff6600, #999999);
![Color 3]()
softlight(#ff6600, #cccccc);
![Color 3]()
softlight(#ff6600, #ffffff);
![Color 3]()
softlight(#ff6600, #ff0000);
![Color 3]()
softlight(#ff6600, #00ff00);
![Color 3]()
softlight(#ff6600, #0000ff);
![Color 3]()
强光
与 overlay
相同,但颜色角色相反。
参数
color1
:一个要叠加的颜色对象。
color2
:一个基本颜色对象。也是决定结果变亮还是变暗的决定因素颜色。
返回:color
示例
hardlight(#ff6600, #000000);
![Color 3]()
hardlight(#ff6600, #333333);
![Color 3]()
hardlight(#ff6600, #666666);
![Color 3]()
hardlight(#ff6600, #999999);
![Color 3]()
hardlight(#ff6600, #cccccc);
![Color 3]()
hardlight(#ff6600, #ffffff);
![Color 3]()
hardlight(#ff6600, #ff0000);
![Color 3]()
hardlight(#ff6600, #00ff00);
![Color 3]()
hardlight(#ff6600, #0000ff);
![Color 3]()
差值
逐通道从第一个颜色中减去第二个颜色。负值取反。减去黑色不会产生变化;减去白色会导致颜色反转。
参数
color1
:一个用作被减数的颜色对象。
color2
:一个用作减数的颜色对象。
返回:color
示例
difference(#ff6600, #000000);
![Color 3]()
difference(#ff6600, #333333);
![Color 3]()
difference(#ff6600, #666666);
![Color 3]()
difference(#ff6600, #999999);
![Color 3]()
difference(#ff6600, #cccccc);
![Color 3]()
difference(#ff6600, #ffffff);
![Color 3]()
difference(#ff6600, #ff0000);
![Color 3]()
difference(#ff6600, #00ff00);
![Color 3]()
difference(#ff6600, #0000ff);
![Color 3]()
排除
与 difference
类似,但对比度较低。
参数
color1
:一个用作被减数的颜色对象。
color2
:一个用作减数的颜色对象。
返回:color
示例
exclusion(#ff6600, #000000);
![Color 3]()
exclusion(#ff6600, #333333);
![Color 3]()
exclusion(#ff6600, #666666);
![Color 3]()
exclusion(#ff6600, #999999);
![Color 3]()
exclusion(#ff6600, #cccccc);
![Color 3]()
exclusion(#ff6600, #ffffff);
![Color 3]()
exclusion(#ff6600, #ff0000);
![Color 3]()
exclusion(#ff6600, #00ff00);
![Color 3]()
exclusion(#ff6600, #0000ff);
![Color 3]()
平均
按通道(RGB)计算两种颜色的平均值。
参数
color1
:颜色对象。
color2
:颜色对象。
返回:color
示例
average(#ff6600, #000000);
![Color 3]()
average(#ff6600, #333333);
![Color 3]()
average(#ff6600, #666666);
![Color 3]()
average(#ff6600, #999999);
![Color 3]()
average(#ff6600, #cccccc);
![Color 3]()
average(#ff6600, #ffffff);
![Color 3]()
average(#ff6600, #ff0000);
![Color 3]()
average(#ff6600, #00ff00);
![Color 3]()
average(#ff6600, #0000ff);
![Color 3]()
取反
与 difference
相反的效果。
结果是一个更亮的色彩。注意:相反 的效果并不意味着倒置的效果,后者是加法运算的结果。
参数
color1
:一个用作被减数的颜色对象。
color2
:一个用作减数的颜色对象。
返回:color
示例
negation(#ff6600, #000000);
![Color 3]()
negation(#ff6600, #333333);
![Color 3]()
negation(#ff6600, #666666);
![Color 3]()
negation(#ff6600, #999999);
![Color 3]()
negation(#ff6600, #cccccc);
![Color 3]()
negation(#ff6600, #ffffff);
![Color 3]()
negation(#ff6600, #ff0000);
![Color 3]()
negation(#ff6600, #00ff00);
![Color 3]()
negation(#ff6600, #0000ff);
![Color 3]()