最新的Web開發教程
 

CSS顏色


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顏色值與指定。

  1. 色調是色輪(從0到360)學位:
    • 0(或360)是紅色
    • 120是綠色的
    • 240是藍色的
  2. 飽和度是一個百分比值:100%是全彩。
  3. 明度也是百分比; 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 */
試一試»

自測練習用!

練習1» 練習2» 練習3» 練習4»