CSS3顏色
CSS支持的顏色名稱,十六進制和RGB顏色。
此外,CSS3還介紹:
- RGBA顏色
- HSL顏色
- HSLA顏色
- 不透明
瀏覽器支持
在表中的數字規定,完全支持CSS3顏色值/屬性中的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
RGBA, HSL, and HSLA | 4.0 | 9.0 | 3.0 | 3.1 | 10.1 |
不透明 | 4 | 9 | 2.0 | 3.1 | 10.1 |
RGBA顏色
RGBA顏色值是RGB顏色值的擴展,帶有alpha通道-它規定了顏色的不透明度。
RGBA(紅,綠,藍,:一個RGBA顏色值與指定alpha )。 的alpha參數是在0.0(完全透明)和1.0(完全不透明)的一個數字。
RGBA(255,0,0,0.2);
RGBA(255,0,0,0.4);
RGBA(255,0,0,0.6);
RGBA(255,0,0,0.8);
下面的例子定義了不同顏色的RGBA:
例
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
試一試» HSL顏色
HSL代表色相,飽和度和亮度。
HSL(色相,飽和度,明度):一個HSL顏色值與指定。
- 色調是色輪(從0到360)學位:
- 0(或360)是紅色
- 120是綠色的
- 240是藍色的
- 飽和度是一個百分比值:100%是全彩。
- 明度也是百分比; 0%是深(黑色)和100%是白色。
HSL(0,100%,30%);
HSL(0,100%,50%);
HSL(0,100%,70%);
HSL(0,100%,90%);
下面的例子定義了不同顏色的HSL:
例
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
試一試» HSLA顏色
HSLA顏色值是HSL顏色值的擴展,帶有alpha通道-它規定了顏色的不透明度。
HSLA(色調,飽和度,明度,:一個HSLA顏色值與指定alpha ),其中,所述alpha參數定義的不透明度。 的alpha參數是在0.0(完全透明)和1.0(完全不透明)的一個數字。
HSLA(0,100%,30%,0.3);
HSLA(0,100%,50%,0.3);
HSLA(0,100%,70%,0.3);
HSLA(0,100%,90%,0.3);
下面的例子定義不同的顏色HSLA:
例
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
試一試» 不透明度
CSS3的不透明度屬性設置為指定的RGB值的不透明性。
Opacity屬性值必須在0.0(完全透明)和1.0(完全不透明)的數字。
RGB(255,0,0);不透明度:0.2;
RGB(255,0,0);不透明度:0.4;
RGB(255,0,0);不透明度:0.6;
RGB(255,0,0);不透明度:0.8;
注意,上面的文字也將是不透明的。
下面的例子顯示了透明度不同的RGB值:
例
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */
試一試»