4-4 色彩 / 透明度表達方式

色彩設定

以下介紹常用色彩呈現方式，其餘請自行參考詳：w3schools(英) / runoob(中)

色彩表達方式 說明
#RRGGBB 16進制色彩
rgb ( 紅 , 綠 , 藍 ) RGB色彩
rgba ( 紅 , 綠 , 藍 , 透明度值) RGBA色彩
其中透明度 ( Alpha ) 無單位，0 (透明) ~ 1 (不透明) 數值

漸層色彩設定

以下僅說明【線性漸層色彩 linear-gradient】 ，【圓形漸層 radial-gradient】請自行查閱參考

色彩形式 說明 連結
linear-gradient 線性漸層色彩 英 中
radial-gradient 圓形漸層色彩 英
conic-gradient 圓錐漸層色彩 英

線性漸層色彩，其屬性應設定於【background-image】中，而非【background-color】中

  background-image: linear-gradient (角度或方向, 開始色, 結束色);

例如：

線性漸層色彩 ( linear-gradient ) 
  範例1：
    background-image: linear-gradient ( 45deg ,  blue  ,  red  ) ;

  範例2：
    background-image: linear-gradient ( to bottom right ,  purple 70% ,  yellow 100% ) ;

  範例3：
    background-image: linear-gradient ( to top , red ,  orange ,  yellow ,  green ,  blue ,  indigo ,  violet  ) ;

透明度 ( opacity )設定

表達方式 說明
opacity:透明度值 透明度 ( Alpha ) 無單位，0 (透明) ~ 1 (不透明) 數值
rgba ( 紅 , 綠 , 藍 , 透明度) RGBA色彩
其中透明度 ( Alpha ) 無單位，0 (透明) ~ 1 (不透明) 數值

例如：

透明度 ( Alpha ) 說明