CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS hsla() 函数

CSS 函数

在线示例

定义 HSL 颜色,并设置透明度:

<!DOCTYPE html>
<title>基础教程(nhooo.com)</title> 
<style>
body {
    background: url('/run/images/bg2.png') beige;
    color: hsla(0, 0%, 0%, 1);
    font-size: 2em;
 }
article { 
    background-color: hsla(30, 100%, 50%, 0.5);
    border: 5px solid darkorange;
    margin: 20px;
    text-align: center;
    }
</style>
</head>
<body>
<article>
<h1>Stars</h1>
</article>
</body>
</html>
测试看看 ‹/›

定义与用法

hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。

HSL 即色相、饱和度、亮度、透明度(英语:Hue, Saturation, Lightness, Alpha )。

  • 色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。

  • 饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取 0-100% 的数值。

  • 亮度(L) 取 0-100%,增加亮度,颜色会向白色变化;减少亮度,颜色会向黑色变化。

  • 透明度(A) 取值 0~1 之间, 代表透明度。

支持版本:CSS3

浏览器兼容性

表格中的数字表示支持该函数的第一个浏览器版本号。

函数




hsla()1.09.01.03.19.5

CSS 语法

hsla(hue, saturation, lightness, alpha)
描述
hue - 色相定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation - 饱和度定义饱和度; 0% 为灰色, 100% 全色
lightness - 亮度定义亮度 0% 为暗, 50% 为普通, 100% 为白
alpha - 透明度定义透明度 0(透完全明) ~ 1(完全不透明)

Alpha Variations

以下是相同颜色多次重复(在背景图像上)的示例,但是每种颜色都有不同的alpha值。

所有其他值都相同(即,所有行的色相,饱和度和照明均相同),只有alpha通道会更改。

这表明随着alpha值的增加,背景图像变得越来越不可见(星星是背景图像)。

蓝色

hsla(240, 100%, 50%, 0)
hsla(240, 100%, 50%, 0.1)
hsla(240, 100%, 50%, 0.2)
hsla(240, 100%, 50%, 0.3)
hsla(240, 100%, 50%, 0.4)
hsla(240, 100%, 50%, 0.5)
hsla(240, 100%, 50%, 0.6)
hsla(240, 100%, 50%, 0.7)
hsla(240, 100%, 50%, 0.8)
hsla(240, 100%, 50%, 0.9)
hsla(240, 100%, 50%, 1)

设置HSL

与RGB模型相比,HSL颜色模型在设置颜色方面更为直观。 尤其是一旦您知道HSL的工作原理。

我已经写过有关 hsl() 函数的内容,该函数解释了 hsla()的功能比此处写的要详细。 如果不确定如何设置和调整基色,请检查一下。

CSS 函数