CSS 的 hsla 颜色值使用指南
CSS 中有一种表示颜色值的方式,就是 hsla(Hue, Saturation, Lightness , Alpha)
。
Hue 指色调,Saturation 指饱和度,Lightness 指亮度,Alpha 指透明度。它们的取值范围如下:
- 色调:0~360。0/360 表示红色,120 表示绿色,240 表示蓝色。
- 饱和度:0.0%~100.0%。0.0% 是一样的灰色,100.0% 是某个色调能达到的最鲜亮、充沛的显示效果。
- 亮度:0.0%~100.0%。0.0% 是纯黑色,100.0% 是纯白色。
- 透明度:0~1。0 是完全透明的,1 是完全不透明的。
这种命名方式非常粗暴、直接,原来是工业界的一种颜色标准。
background: red;
/* 等价于 */
background: hsla(0, 100%, 50%, 1);
background: blue;
/* 等价于 */
background: hsla(240, 100%, 50%, 1);
但是绿色不是 hsla(240, 100%, 50%, 1)
!浏览器渲染的绿色亮度调低了。
background: green;
/* 等价于 */
background: hsla(120, 100%, 25%, 1);
完整的例子可以看 这里。
(完)
Leave a Comment Markdown supported. Click @usernames to add to comment.