笙亿网络策划

Less 怎么定义颜色函数？

约 4 分钟读完 43 阅
文章导读
上一个 测验 下一个 说明 LESS 提供了许多有用的颜色函数，可以以不同方式更改和操作颜色。LESS 支持下表所示的一些颜色定义函数 —
📋 目录
  1. 壹 说明
A A

LESS - 颜色定义函数

上一个
测验
下一个

说明

LESS 提供了许多有用的颜色函数，可以以不同方式更改和操作颜色。LESS 支持下表所示的一些颜色定义函数 —

序号 函数 & 说明 示例
1

rgb

它从红、绿、蓝值创建颜色。其参数如下 −

  • red − 包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。

  • green − 包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。

  • blue − 包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。

 
rgb(220,20,60)

它将颜色转换为 rgb 值如下 −

#dc143c
2

rgba

它从红、绿、蓝和 alpha 值确定颜色。其参数如下 −

  • red − 包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。

  • green − 包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。

  • blue − 包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。

  • alpha − 包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

 
rgba(220,20,60, 0.5)

它将颜色对象转换为 rgba 值如下 −

rgba(220, 20, 60, 0.5)
3

argb

它定义颜色的十六进制表示，格式为 #AARRGGBB。它使用以下参数 −

  • color − 指定颜色对象。

 
argb(rgba(176,23,31,0.5))

它返回 argb 颜色如下 −

#80b0171f
4

hsl

它从色调、饱和度和亮度值生成颜色。其参数如下 −

  • hue − 包含 0 - 360 之间的整数，表示度数。

  • saturation − 包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

  • lightness − 包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

 
hsl(120,100%, 50%)

它使用 HSL 值返回颜色对象如下 −

#00ff00
5

hsla

它从色调、饱和度、亮度和 alpha 值生成颜色。其参数如下 −

  • hue − 包含 0 - 360 之间的整数，表示度数。

  • saturation − 包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

  • lightness − 包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

  • alpha − 包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

 
hsla(0,100%,50%,0.5)

它使用 HSLA 值指定颜色对象如下 −

rgba(255, 0, 0, 0.5);
6

hsv

它从色调、饱和度和值生成颜色。其参数如下 −

  • hue − 包含 0 - 360 之间的整数，表示度数。

  • saturation − 包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

  • value − 包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

 
hsv(80,90%,70%)

它将颜色对象转换为 hsv 值如下 −

#7db312
7

hsva

它从色调、饱和度、值和 alpha 值生成颜色。它使用以下参数 −

  • hue − 包含 0 - 360 之间的整数，表示度数。

  • saturation − 包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

  • value − 包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

  • alpha − 包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

 
hsva(80,90%,70%,0.6)

它使用 hsva 值指定颜色对象如下 −

rgba(125, 179, 18, 0.6)