因此,hsla(120, 100%, 50%, 0.5)表示一种半透明的、完全饱和的、中等亮度的绿色。
通过HSLA颜色,我们可以更准确地控制颜色的外观和透明度。 以下是几个HSLA颜色的例子: 1.橙色:HSLA(30, 100%, 50%, 1) 这个例子表示色相为30度(对应橙色),饱和度为100%(非常鲜艳),亮度为50%(半明半暗),透明度为100%(完全不透明)。 2.紫色:HSLA(270, 100%, 50%, 0.8) 这个例子表示色相为270度(对应...
表格中的数字表示支持该函数的第一个浏览器版本号。 六、hsla() css中存在两种设置颜色值的方式:hsl()和hsla(),它们基本上都是采用了HSL色彩模式的方法来设置颜色,接下来就来看看什么是HSLA色彩模式。 HSLA是在HSL的基础上增加了一个透明度(A)的设置,取值0~1之间。 七、拓展阅读 《Vue进阶(幺柒幺):前端用户...
HSLA是另一种颜色表示方式,它代表色相(Hue)、饱和度(Saturation)、亮度(Lightness)和Alpha(透明度)。与RGBA类似,HSLA也允许你设置颜色的透明度。 示例代码: .hsla-example { background-color: hsla(0, 100%, 50%, 0.5); /* 半透明的红色 */ } 在这个例子中,HSLA被用来表示半透明的红色。色相值为0表示红...
在HSLA模型中,色相是一个在0到360度之间的值,它表示了颜色所处的位置在整个颜色环中的角度。 饱和度(Saturation)是指颜色的纯度或者强度。它用百分比表示,0%表示无饱和度,即灰度色,而100%表示完全饱和的纯色。 亮度(Lightness)是指颜色的亮度或者明度。它也用百分比表示,0%表示完全黑色,而100%表示完全白色。
但是不管是RGB模式还是十六进制模式都无法主观感受,所以CSS3又加入HSL颜色模式。当然HSL模式也增加opacity的Alpha值:HSLA模式(HSL模式与HSLA模式的关系跟RGB与RGBA关系一样)。接下来我们介绍 RGBA、HSL以及HSLA这几种新的色彩模式,顺便介绍下Opacity透明属性的区别。
HSLA是HSL颜色模型的扩展,同样增加了透明度通道。HSLA值在CSS中用圆括号内的四个值表示,前三个值是HSL的值,最后一个值是0%到100%的透明度。 p {color: hsla(0, 100%, 50%, 0.5); /* HSLA颜色值表示半透明的红色 */} 结论 CSS中的颜色表示方法非常灵活,允许开发者根据需要选择最合适的方式。预定义的颜...
HSLA 颜色值是 HSL 的扩展,带有 Alpha 通道(透明度)。HSL 颜色值在HTML 中,可以使用色调、饱和度和亮度(HSL)指定颜色,格式如下:hsl(hue, saturation, lightness)色调是色轮上从0到360的度数。0是红色,120是绿色,240是蓝色。饱和度是一个百分比值,0%表示灰色阴影,100%表示全色。
hsla()函数可以通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色。 示例: .xkd{` color: hsla(100, 100%, 60%, 0.8);a{color: hsla(255, 80%, 70%, 0.3);}}` 编译成 CSS 代码: ...
css中存在两种设置颜色值的方式:hsl()和hsla(),它们基本上都是采用了HSL色彩模式的方法来设置颜色,接下来就来看看什么是HSLA色彩模式。 HSLA是在HSL的基础上增加了一个透明度(A)的设置,取值0~1之间。 拓展阅读 《Vue进阶(幺柒幺):前端用户体验提升(五)Flex实现弹性布局》 ...