到今天为止,已经为大家介绍了很多LESS的函数了。相信大家也有所了解了。下面为大家介绍有关颜色混合方面的函数。这一次仅仅是一些知识的介绍,没有相关了例子了。希望这些有关LESS的函数能在大家编写LESS的时候有所帮助。
颜色混合的方式与图像编辑器 Photoshop, Firework 或者 GIMP 的图层混合模式 (layer blending modes) 相似,因此制作 .psd 文件时处理颜色的方法可以同样用在 CSS 中。
multiply(@color1, @color2)
分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算,然后再除以 255,输出结果是更深的颜色。(译注:对应Photoshop中的“变暗/正片叠底”。)
参数:
@color1: 颜色对象
@color2: 颜色对象
返回值:颜色 (color)
screen(@color1, @color2)
与 multiply() 函数效果相反,输出结果是更亮的颜色。(译注:对应Photoshop中的“变亮/滤色”。)
参数:
@color1: 颜色对象
@color2: 颜色对象
返回值:颜色 (color)
overlay(@color1, @color2)
结合 multiply() 与 screen() 两个函数的效果,令浅的颜色变得更浅,深的颜色变得更深。(译注:对应Photoshop中的“叠加”。)注意:输出结果由第一个颜色参数决定。
参数:
@color1: 颜色对象,是用于叠加的颜色,也是结果是更亮还是更暗的决定因素。
@color2: 颜色对象,被叠加的颜色
返回值:颜色 (color)
softlight(@color1, @color2)
与 overlay() 函数效果相似,只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色。(译注:对应Photoshop中的“柔光”。)
参数:
@color1: 混合色(光源)
@color2: 被混合的颜色
返回值:颜色 (color)
hardlight(@color1, @color2)
与 overlay() 函数效果相似,不过由第二个颜色参数决定输出颜色的亮度或黑度,而不是第一个颜色参数决定。(译注:对应Photoshop中的“强光/亮光/线性光/点光”。)
参数:
@color1: 混合色(光源)
@color2: 被混合的颜色
返回值:颜色 (color)
difference(@color1, @color2)
从第一个颜色值中减去第二个(分别计算 RGB 三种颜色值),输出结果是更深的颜色。(译注:对应Photoshop中的“差值/排除”。)
参数:
@color1: 被减的颜色对象
@color2: 减去的颜色对象
返回值:颜色 (color)
exclusion(@color1, @color2)
效果与 difference() 函数效果相似,只是输出结果差别更小 (lower contrast)。(译注:对应Photoshop中的“差值/排除”。)
参数:
@color1: 被减的颜色对象
@color2: 减去的颜色对象
average(@color1, @color2)
分别对 RGB 的三种颜色值取平均值,然后输出结果。
参数:
@color1: 颜色对象 (A color object.)
@color2: 颜色对象 (A color object.)
返回值:颜色 (color)
negation(@color1, @color2)
与 difference() 函数效果相反,输出结果是更亮的颜色。请注意:效果相反不代表做加法运算。
参数:
@color1: 被减的颜色对象
@color2: 减去的颜色对象
返回值:颜色 (color)
LESS详解之函数(六)就为大家介绍到这里了。这一波儿接着一波儿的LESS函数的介绍,能为大家有所帮助。感谢大家长期以来对梦龙小站的支持。