CSS hsla() 语法
在 CSS 中，hsla() 函数通过色相（hue）、饱和度（saturation）、亮度（lightness）和透明度（alpha）来定义颜色。
需要注意的是，在最新版本的 CSS 中，hsla() 和 hsl() 这两个函数已经合并了。
语法：
hsla(hue, saturation, lightness, alpha)说明：
hsla() 函数接受以下 4 个参数。
hue（色相）：表示颜色的类型，取值范围是 0 到 360 的角度（无单位）。- 0 或 360 表示红色。
- 120 表示绿色。
- 240 表示蓝色。
- 色相值可以是负数或大于 360，浏览器会自动将其调整到 0 到 360 范围内。
saturation（饱和度）：颜色的鲜艳程度，取值范围是 0% 到 100%。- 0% 表示灰色（没有颜色）。
- 100% 表示最鲜艳的颜色。
lightness（亮度）：颜色的明暗程度，取值范围是 0% 到 100%。- 0% 表示黑色。
- 100% 表示白色。
- 50% 表示正常亮度。
alpha（透明度）：颜色的不透明程度，取值范围是 0 到 1（也可以是 0% 到 100%）。- 0 表示完全透明。
- 1 表示完全不透明。
示例：
hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
hsla(120, 100%, 50%, 0.3); /* 透明绿色 */
hsla(240, 100%, 50%, 1); /* 不透明蓝色 */对于 hsla() 函数，小伙伴们还需要清楚以下几点：
- hsla() 可以与 var()、calc() 等其他 CSS 函数结合一起使用。
- hsla() 的结果是一个 “字符串” 类型的颜色值。
- hsla() 适用于所有可以使用颜色值作为值的 CSS 属性，比如 color、background-color、border-color 等。
CSS hsla() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 低 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS hsla() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS hsla() 函数是如何使用的。
示例 1：hsla() 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
background-color: hsla(240, 100%, 50%, 0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，hsla(240, 100%, 50%, 0.5) 表示定义了一个半透明的蓝色：
- 色相 240。
- 饱和度 100%。
- 亮度 50%，透明度 50%）。
这种透明效果，可以使得背景色呈现出一种柔和的视觉效果。
示例 2：hsla() 结合 CSS 变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
:root {
--base-hue: 120;
--base-alpha: 0.7;
}
div {
width: 200px;
height: 100px;
background-color: hsla(var(--base-hue), 80%, 60%, var(--base-alpha));
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们首先定义了 2 个 CSS 变量：--base-hue 和 --base-alpha。hsla(var(--base-hue), 80%, 60%, var(--base-alpha)) 表示：
- 色相 120。
- 饱和度 80%。
- 亮度 60%。
- 透明度 0.7。
使用 CSS 变量这种方式，适合用于统一管理和调整颜色样式。
示例 3：hsla() 用于文本颜色和边框颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
color: hsla(0, 100%, 50%, 0.8);
border: 2px solid hsla(0, 100%, 50%, 0.4);
padding: 10px;
width: 200px;
}
</style>
</head>
<body>
<p>绿叶网 - 为好教程，全力以赴</p>
</body>
</html>页面效果如下图所示。
分析：
hsla(0, 100%, 50%, 0.8) 表示定义了一个稍微透明的红色，而 hsla(0, 100%, 50%, 0.4) 表示定义了一个更为透明的红色。
示例 4：hsla() 响应式调整透明度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
background-color: hsla(300, 70%, 50%, 0.6);
}
@media (max-width: 1200px) {
div {
background-color: hsla(300, 70%, 50%, 0.9);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>当浏览器尺寸大于 1200px 时，页面效果如下图 1 所示。当浏览器尺寸小于等于 1200px 时，页面效果如下图 2 所示。
分析：
hsla(300, 70%, 50%, 0.6) 表示定义了一个紫色背景（透明度 60%）。然后我们通过 CSS 媒体查询，使得当屏幕宽度小于等于 1200px 时，透明度变为 90%。
