CSS 函数

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

要添加颜色透明度，可以将可选的 alpha 分量传递给 lab() 函数。

可能的值

lab() 函数的函数符号为 lab(L a b[ / A])。

  • L: 可以包含任一格式(s)，代表 CIE 亮度:

    • a <number>:0 到 100 之间的任何数字，其中 0 对应于 0%（黑色），100 对应于 100%（白色）。

    • <percentage>:0% 到 100% 之间的任何值。

    • keyword none

  • a:可以包含任一格式，指定 CIELAB 色彩空间中沿 a 轴的距离（显示如何绿色/红色是）:

    • a <number>:-125 到 125 之间的任意数字。

    • a <percentage>:任意值介于 -100% 和 100% 之间。

    • keyword none

  • b:可以包含任一格式，指定 CIELAB 颜色空间中沿 b 轴的距离（显示蓝色/黄色的颜色）:

    • a <number>:-125 到 125 之间的任意数字。

    • <percentage>:-100% 到 100% 之间的任意值。

    • 关键字none

  • A:表示颜色的透明度。它是一个可选值。

    • <alpha-value>:0 到 1 之间的任何数字，其中 1 对应于完全不透明，0 对应于完全透明。

    • keyword 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>