Less颜色混合函数（14）

颜色混合函数

multiply()函数

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

div{
	background:#ff6600;
	background:#000000;
	background:multiply(#ff6600,#000000);
}

编译结果

div{
	background:#ff6600;
	background:#000000;
	background:#000000;
}

screen()函数

作用：与multiply()函数效果相反，输出结果是更亮的颜色（对应Photoshop中的“变亮/滤色”）
例子：
Less中编写

div{
	background:#ff6600;
	background:#000000;
	background:screen(#ff6600,#000000);
}

编译结果

div{
	background:#ff6600;
	background:#000000;
	background:#ff6600;
}

overlay()函数

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

softlight()函数

作用：与overlay()函数效果相似，只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色（对应Photoshop中的“柔光”）
例子：
Less中编写

div{
	background:#ff6600;
	background:#ffffff;
	background:softlight(#ff6600,#ffffff);
}

编译结果

div{
	background:#ff6600;
	background:#000000;
	background:#ffa100;
}

hardlight()函数

作用：与overlay()函数效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，而不是第一个颜色参数决定（对应Photoshop中的“强光/亮光/线性光/点光”）
例子：
Less中编写

div{
	background:#ff6600;
	background:#333;
	background:hardlight(#ff6600,#333);
}

编译结果

div{
	background:#ff6600;
	background:#333333;
	background:#662900;
}

difference()函数

作用：从第一个颜色值中减去第二个（分别计算RGB三种颜色值），输出结果是更深的颜色。（对应Photoshop中的“差值/排除”）
例子：
Less中编写

div{
	background:#ff6600;
	background:#333;
	background:difference(#ff6600,#333);
}

编译结果

div{
	background:#ff6600;
	background:#333333;
	background:#cc3333;
}

exclusion()函数

作用：效果与difference函数效果相似，只是输出结果差别更小（lower contrast）（对应Photoshop中的“差值/排除”）
例子：
Less中编写

div{
	background:#ff6600;
	background:#333;
	background:exclusion(#ff6600,#333);
}

编译结果

div{
	background:#ff6600;
	background:#333333;
	background:#cc7033;
}

average()函数

作用：分别对RGB的三种颜色值取平均值，然后输出结果。
例子：
Less中编写

div{
	background:#ff6600;
	background:#333;
	background:average(#ff6600,#333);
}

编译结果

div{
	background:#ff6600;
	background:#333333;
	background:#994d1a;
}

negation()函数

作用：与difference()函数效果相反，输出结果是更亮的颜色。请注意：效果相反不代表做加法运算
例子：
Less中编写

div{
	background:#ff6600;
	background:#333;
	background:negation(#ff6600,#333);
}

编译结果

div{
	background:#ff6600;
	background:#333333;
	background:#cc9933;
}