CSS 函数 - lab（）

CSS 中的 lab（）函数在 CIE L*a*b 颜色空间中表示颜色。它代表人眼可见的所有颜色。

要添加颜色透明度，可以将可选的 alpha 组件传递给 lab（）函数。

可能的值

lab（）函数的函数表示法是 lab（L a b[ / A]）。

L：可以包含代表 CIE 亮度的任一格式：
- a <number>：0 到 100 之间的任何数字，其中 0 对应于 0%（黑色），100 对应 100%（白色）。
- <percentage>：介于 0% 和 100% 之间的任何值。
- 关键词 none
a：可以包含以下任一格式，指定 CIELAB 颜色空间中沿 a 轴的距离（显示绿色/红色的程度）：
- a <number>：介于 -125 和 125 之间的任何数字。
- A <percentage>：介于 -100% 和 100% 之间的任何值。
- 关键词 none
b：可以包含以下任一格式，指定 CIELAB 颜色空间中沿 b 轴的距离（显示蓝色/黄色的程度）：
- a <number>：介于 -125 和 125 之间的任何数字。
- A <percentage>：介于 -100% 和 100% 之间的任何值。
- 关键词 none
A：代表颜色的透明度。它是一个可选值。
- <alpha-value>：0 到 1 之间的任何数字，其中 1 对应于完全不透明度，0 对应于完全透明。
- 关键词 none

在 lab（）函数的情况下，值 100% 等于 L 值的数字 100，以及 a 和 b 值的数字 125。

语法


lab(29.2345% 39.3825 20.0664) | lab(29 39.3825% 20.0664%) | lab(29.2345% 39.3825 20.0664 / 0.5);

CSS lab（） - 值的组合

以下示例显示了 lab（）函数在不同值组合中的用法：


<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 margin-bottom: 10px;
	 	}
	 	.lab-b-none {
	 	 	 background-color: lab(100 125 none);
	 	}
	 	.lab-a-none {
	 	 	 background-color: lab(100 none 125);
	 	}

	 	.lab-l-none {
	 	 	 background-color: lab(none -120 125);
	 	 	 color: white;
	 	}
	 	.lab-l-percent {
	 	 	 background-color: lab(75% -120 none);
	 	}

	 	.lab-ab-negative {
	 	 	 background-color: lab(0 -120 -120);
	 	}
	 	.lab-all-positive {
	 	 	 background-color: lab(100 -125 -110);
	 	}

	 	.lab-alpha {
	 	 	 background-color: lab(100 -125 -110 / 0.2);
	 	}
</style>
</head>
<body>
	 	<div class="lab-b-none">b=none</div>
	 	<div class="lab-a-none">a=none</div>

	 	<div class="lab-l-none">L=none</div>
	 	<div class="lab-l-percent">L=%</div>

	 	<div class="lab-ab-negative">a&b=-ve values</div>
	 	<div class="lab-all-positive">all=+ve values</div>

	 	<div class="lab-alpha">alpha value added</div>
</body>
</html>

打印本页