颜色混合函数

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;
}

Less颜色混合函数（14）相关推荐

linux tasklet函数,14.9.5 实例：Tasklet演示
14.9.5 实例:Tasklet演示本节的例子演示了Tasklet的使用方法.虽然Tasklet是Linux中断处理的底半部的一种实现机制.但Tasklet并不一定要和中断一起使用.即使没有中断 ...
matlab中screen函数,14 用 Screen 函数打开一个窗口
从今天开始,我打算边解释 PTB 自带的 demo 程序,边讲解一些涉及到的知识点,这样进度会快一点. PTB 的 demo 可以在 Psychtoolbox Demos 网站上获取.另外,在安装目录 ...
Less系列之函数（Functions）
文章の目录 1.Logical函数 1.1.if 1.1.1.参数 1.1.2.示例 1.2.boolean 1.2.1.参数 1.2.2.示例 2.字符串函数 2.1.转义 escape 2.1.1 ...
less函数库(function)
函数库(function) 函数库里面包括有字符串函数.长度函数.数学函数.类型函数.颜色值定义函数.颜色值通道提取函数.颜色值运算函数及颜色混合函数.但是常用到的函数只有数学函数,其实其他的函数很少 ...
js循环动态绑定带参数函数遇到的问题及解决方案[转]
今天写原生javascript时,想利用绑定事件实现类似jquery中on方法的功能:于是有了for循环里绑定事件,无意中发现定义类能解决好多问题! 例如:一个不确定长度的列表,在鼠标经过某一条的时候 ...
python之函数三装饰器
装饰器形成的过程装饰器的作用:不想修改函数的调用方式,但是还想在原来的函数前后加功能原则:开发封闭原则开发:对扩展是开发的封闭:对修改是封闭的装饰器的固定模式计算运行时间 1 import ...
grdraw显示区域 lisp_lisp函数按功能分类
LISP简介 LISP是一种通用计算机程序语言,长期以来垄断人工智能领域的应用.LISP作为因应人工智能而设计的语言,是个声明式系内函数式程序设计语言,有别于命令式系内过程式的C.Fortran和面向 ...
JavaScript 函数声明，函数表达式，匿名函数，立即执行函数之区别
函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...
python 内部函数，以及lambda，filter，map等内置函数
1 #!/usr/bin/python 2 #encoding=utf-8 3 4 def back(): 5 return 1,2, "xxx" 6 7 #python 可变参数 ...
Golang面向过程编程-函数
Golang面向过程编程-函数作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是函数简单的说函数的作用就是把程序里多次调用的相同的代码部分定义成一份,然后起个名字,所有的 ...

Less颜色混合函数（14）

颜色混合函数

multiply()函数

screen()函数

overlay()函数

softlight()函数

hardlight()函数

difference()函数

exclusion()函数

average()函数

negation()函数

Less颜色混合函数（14）相关推荐

最新文章

热门文章