css hsla

作者：寂寞带点伤发布日期:2025-04-06 浏览:120

/* 使用 HSLA 颜色模式设置背景颜色和文本颜色 */

body {
  /* 设置背景颜色为半透明的浅蓝色 */
  background-color: hsla(190, 50%, 80%, 0.5);
}

h1 {
  /* 设置标题颜色为完全不透明的深蓝色 */
  color: hsla(210, 70%, 30%, 1);
}

p {
  /* 设置段落文字颜色为半透明的灰色 */
  color: hsla(0, 0%, 50%, 0.7);
}

解释说明：

hsla(190, 50%, 80%, 0.5)：表示一个带有透明度（alpha）的HSL颜色。190是色调（Hue），50%是饱和度（Saturation），80%是亮度（Lightness），0.5是透明度（Alpha），范围从0（完全透明）到1（完全不透明）。
hsla(210, 70%, 30%, 1)：这是一个深蓝色，完全不透明。
hsla(0, 0%, 50%, 0.7)：这是一个灰色，带有一定的透明度。

上一篇：css translate3d

下一篇：下划线 css