CSS中hsla的用法

2021-09-05 09:50:43 字數 845 閱讀 2784

hsla是css3引入的乙個顏色表達方式,今天就來學習一下它的用法。

1.什麼是hsla

hsla(h,s,l,a)

h:hue(色調)。0(或360)表示紅色,120表示綠色,240表示藍色,也可取其他數值來指定顏色。取值為:0 - 360

s:saturation(飽和度)。取值為:0.0% - 100.0%

l:lightness(亮度)。取值為:0.0% - 100.0%

a:alpha透明度。取值0~1之間。

直白點講,h就是來控制顏色的變化(這個最好理解),s就是控制顏色的濃淡,l來控制亮度,100%是白色,0%是黑色,不論是那種顏色或者飽和度,a是透明度。

2.怎麼去使用hsla

background-color: hsla(0,0%,0%,0.5);
使用的方式和rgb沒有區別,但是內心要熟知0-360對應的顏色,以120為梯度,按照rgb的順序,0和360對應r,其實也很好記。

3.什麼時候使用hsla

首先要知道hsla與rgba本質上是沒有區別的,二者均能實現等價的效果,但是有些技巧是要知道的:

hsla的黑色與白色,只需將l調整為0%或者100%即可,其他不用管

灰色只需將s設定為0%,此時效果至於la有關,h無關

很直觀,不用進行10進製和16進製制的轉換

4.注意事項

注意相容問題哦

CSS中的幾種顏色表示法,如hsla

平常相對熟悉的也就rgb色了,其他基本不清楚,即使是rgb也沒弄清楚他們的變化規律。所以有必要專門用一篇文本來記錄了。b rgb b b hsla b hsl色彩模式是工業界的一種顏色標準,是通過對色調 h 飽和度 s 亮度 l 三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的,hsl...

CSS學習筆記 RGBA與HSLA

在css3中可以使用rgba和hsla兩種色彩模式,二者均可以用來在設定顏色的同時也指定其透明度。hsla指的是 色調 飽和度 亮度 alpha透明度 其中,alpha的取值從0 1 0代表完全透明,1代表完全不透明。css3仍有opacity屬性,但它的作用是使整個元素都半透明,包括前景內容,而不...

css中 display block 的 用法

對所有的塊元素都沒有意義,塊元素的dispaly屬性預設值為block,沒必要再顯式定義 除非你之前對塊元素的display屬性重新定義過。display block 比較常用於這兩個標籤 因為這兩個標籤非塊元素,如果不用display block定義一下,那麼定義width height等和長寬相...