codecamp

Less 颜色通道函数

Less支持少数内置函数,用于设置通道的值。 通道根据颜色定义设置值。 HSL颜色具有色相,饱和度和亮度通道,RGB颜色具有红色,绿色和蓝色通道。 以下是颜色通道功能的列表:


S.N. 函数及描述 例子
1 hue

在HSL颜色空间中,提取颜色对象的色调通道。
background: hue(hsl(75, 90%, 30%));
它在CSS中编译如下所示:
background: 75;
2 saturation

在HSL颜色空间中,提取彩色对象的饱和通道。
background: saturation(hsl(75, 90%, 30%));
它在CSS中编译如下所示:
background: 90%;
3 lightness

在HSL颜色空间中,从颜色对象提取亮度通道。
background: lightness(hsl(75, 90%, 30%));
它在CSS中编译如下所示:
background: 30%;
4 hsvhue

在HSV色彩空间中,提取色彩对象的色调通道。
background: hsvhue(hsv(75, 90%, 30%));

它在CSS中编译如下所示:

background: 75;

5 hsvsaturation

在HSL颜色空间中,提取彩色对象的饱和通道。
background: hsvsaturation(hsv(75, 90%, 30%));
它在CSS中编译如下所示:
background: 90%;
6 hsvvalue

在HSL颜色空间中,提取颜色对象的值通道。
background: hsvvalue(hsv(75, 90%, 30%));
它在CSS中编译如下所示:
background: 30%;
7 red

提取彩色对象的红色通道。
background: red(rgb(5, 15, 25));
它在CSS中编译如下所示:
background: 5;
8 green

提取彩色对象的绿色通道。
background: green(rgb(5, 15, 25));
它在CSS中编译如下所示:
background: 15;
9 blue

提取彩色对象的蓝色通道。
background: blue(rgb(5, 15, 25));
它在CSS中编译如下所示:
background: 25;
10 alpha

提取颜色对象的alpha通道。
background: alpha(rgba(5, 15, 25, 1.5));
它在CSS中编译如下所示:
background: 2;
11 luma

计算颜色对象的亮度值。
background: luma(rgb(50, 250, 150));
它在CSS中编译如下所示:
background: 71.2513323%;
12 luminance

在没有伽马校正的情况下计算亮度值。
background: luminance(rgb(50, 250, 150));
它在CSS中编译如下所示:
background: 78.53333333%;

Less 颜色定义函数
Less 颜色操作
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Less 基本教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }