快速入门
概览
变量(Variables)
混合(Mixins)
嵌套(Nesting)
运算(Operations)
转义(Escaping)
函数(Functions)
命名空间和访问符
映射(Maps)
作用域(Scope)
注释(Comments)
导入(Importing)
Less.js 用法
命令行用法
浏览器使用
Less.js选项
预装插件
程序化使用
API
Contributing to Less.js
Less 函数手册
逻辑函数
字符串函数
列表函数
数学函数
类型函数
其他功能
颜色定义函数
颜色通道函数
颜色操作函数
颜色混合函数
进阶指南
合并
父选择器
扩展
变量
Mixins
CSS Guards
Detached Rulesets
@import At-Rules
@plugin At-Rules
Maps (NEW!)
Less入门文档
网站首页
颜色混合函数
These operations are similar (though not necessarily identical) to the blend modes found in image editors like Photoshop, Fireworks, or GIMP, so you can use them to make your CSS colors match your images. ### multiply Multiply two colors. Corresponding RGB channels from each of the two colors are multiplied together then divided by 255. The result is a darker color. Parameters: - color1: A color object. - color2: A color object. Returns: `color` Examples: ```less multiply(#ff6600, #000000); ```
```less multiply(#ff6600, #333333); ```
```less multiply(#ff6600, #666666); ```
```less multiply(#ff6600, #999999); ```
```less multiply(#ff6600, #cccccc); ```
```less multiply(#ff6600, #ffffff); ```
```less multiply(#ff6600, #ff0000); ```
```less multiply(#ff6600, #00ff00); ```
```less multiply(#ff6600, #0000ff); ```
### screen Do the opposite of multiply. The result is a brighter color. Parameters: - color1: A color object. - color2: A color object. Returns: `color` Example: ```less screen(#ff6600, #000000); ```
```less screen(#ff6600, #333333); ```
```less screen(#ff6600, #666666); ```
```less screen(#ff6600, #999999); ```
```less screen(#ff6600, #cccccc); ```
```less screen(#ff6600, #ffffff); ```
```less screen(#ff6600, #ff0000); ```
```less screen(#ff6600, #00ff00); ```
```less screen(#ff6600, #0000ff); ```
### overlay Combines the effects of both multiply and screen. Conditionally make light channels lighter and dark channels darker. Note: The results of the conditions are determined by the first color parameter. Parameters: - `color1`: A base color object. Also the determinant color to make the result lighter or darker. - `color2`: A color object to overlay. Returns: `color` Example: ```less overlay(#ff6600, #000000); ```
```less overlay(#ff6600, #333333); ```
```less overlay(#ff6600, #666666); ```
```less overlay(#ff6600, #999999); ```
```less overlay(#ff6600, #cccccc); ```
```less overlay(#ff6600, #ffffff); ```
```less overlay(#ff6600, #ff0000); ```
```less overlay(#ff6600, #00ff00); ```
```less overlay(#ff6600, #0000ff); ```
### softlight Similar to overlay but avoids pure black resulting in pure black, and pure white resulting in pure white. Parameters: - `color1`: A color object to soft light another. - `color2`: A color object to be soft lighten. Returns: `color` Example: ```less softlight(#ff6600, #000000); ```
```less softlight(#ff6600, #333333); ```
```less softlight(#ff6600, #666666); ```
```less softlight(#ff6600, #999999); ```
```less softlight(#ff6600, #cccccc); ```
```less softlight(#ff6600, #ffffff); ```
```less softlight(#ff6600, #ff0000); ```
```less softlight(#ff6600, #00ff00); ```
```less softlight(#ff6600, #0000ff); ```
### hardlight The same as overlay but with the color roles reversed. Parameters: - `color1`: A color object to overlay. - `color2`: A base color object. Also the determinant color to make the result lighter or darker. Returns: `color` Example: ```less hardlight(#ff6600, #000000); ```
```less hardlight(#ff6600, #333333); ```
```less hardlight(#ff6600, #666666); ```
```less hardlight(#ff6600, #999999); ```
```less hardlight(#ff6600, #cccccc); ```
```less hardlight(#ff6600, #ffffff); ```
```less hardlight(#ff6600, #ff0000); ```
```less hardlight(#ff6600, #00ff00); ```
```less hardlight(#ff6600, #0000ff); ```
### difference Subtracts the second color from the first color on a channel-by-channel basis. Negative values are inverted. Subtracting black results in no change; subtracting white results in color inversion. Parameters: - `color1`: A color object to act as the minuend. - `color2`: A color object to act as the subtrahend. Returns: `color` Example: ```less difference(#ff6600, #000000); ```
```less difference(#ff6600, #333333); ```
```less difference(#ff6600, #666666); ```
```less difference(#ff6600, #999999); ```
```less difference(#ff6600, #cccccc); ```
```less difference(#ff6600, #ffffff); ```
```less difference(#ff6600, #ff0000); ```
```less difference(#ff6600, #00ff00); ```
```less difference(#ff6600, #0000ff); ```
### exclusion A similar effect to difference with lower contrast. Parameters: - `color1`: A color object to act as the minuend. - `color2`: A color object to act as the subtrahend. Returns: `color` Example: ```less exclusion(#ff6600, #000000); ```
```less exclusion(#ff6600, #333333); ```
```less exclusion(#ff6600, #666666); ```
```less exclusion(#ff6600, #999999); ```
```less exclusion(#ff6600, #cccccc); ```
```less exclusion(#ff6600, #ffffff); ```
```less exclusion(#ff6600, #ff0000); ```
```less exclusion(#ff6600, #00ff00); ```
```less exclusion(#ff6600, #0000ff); ```
### average Compute the average of two colors on a per-channel (RGB) basis. Parameters: - `color1`: A color object. - `color2`: A color object. Returns: `color` Example: ```less average(#ff6600, #000000); ```
```less average(#ff6600, #333333); ```
```less average(#ff6600, #666666); ```
```less average(#ff6600, #999999); ```
```less average(#ff6600, #cccccc); ```
```less average(#ff6600, #ffffff); ```
```less average(#ff6600, #ff0000); ```
```less average(#ff6600, #00ff00); ```
```less average(#ff6600, #0000ff); ```
### negation Do the opposite effect to difference. The result is a brighter color. Note: The opposite effect doesn't mean the inverted effect as resulting from an addition operation. Parameters: - `color1`: A color object to act as the minuend. - `color2`: A color object to act as the subtrahend. Returns: `color` Example: ```less negation(#ff6600, #000000); ```
```less negation(#ff6600, #333333); ```
```less negation(#ff6600, #666666); ```
```less negation(#ff6600, #999999); ```
```less negation(#ff6600, #cccccc); ```
```less negation(#ff6600, #ffffff); ```
```less negation(#ff6600, #ff0000); ```
```less negation(#ff6600, #00ff00); ```
```less negation(#ff6600, #0000ff); ```
上一篇:
颜色操作函数
下一篇:
变量