[教學] CSS3 半透明背景的四種設定方法 (RGBa、HSLa、Opacity、HEX)

　　雖然CSS3新增許多好用的屬性，來減少製作圖檔的時間，與加快網頁的載入速度，而在CSS3眾多的屬性當中，梅干最常使用到的就是透明背景，這個屬性不但實用，且設定也相當的方便，但在設定這個透明的背景方法，共有四種。

  而梅干將這四種的設定方式，作了點整理，但有使用過的朋友，應該最熟悉RGBa，利用三原色再加一個透明，就可快速的將背景變成半透明，而除了RGBa外，其實大家最常用的HEX就是16進位的色碼，也是支援半透明的，至於要怎麼用，現在就一塊來看看吧！

---

一、RGBa(紅,綠,藍,透明)：
RGBa應該是大家最熟悉，也是最常使用的，同時它的表示方式也很直覺，就是紅、綠、藍、透明度。

---

二、HSLa(色相,飽和度,明度,透明)：
而HSLa與RGBa的設定方式，相當的雷同，透明度都是放置最後，前面分別就是色相、飽和度、明度，但這個的表示方式，就較難從數值中，判斷出是什麼顏色。

---

三、HEX & Opacity：
第三種方式，則是透過大家所熟悉的16進位的色碼，再搭配Opacity屬性，將區塊設為半透明，但透過這個Opacity的半透明屬性，有個小缺點就是，整個div區塊內的元素，也會一塊變成半透明的效果。

---

四、HEXA：
第四種方式則是透過16進位的色碼來作表示，相信大家對於16進位的色碼，就熟悉許多，同時透過HEX還可搭配一個透明的數值，一樣也是加在最後，只不過它的透明值，不像RGBa那麼好理解，因為全部都是轉為16進位，所以透過HEX設定半透明時，則會有8碼。

---

以上這四種的半透明顯示方法，下回各位可以試試看，而梅干最近則比較偏愛HEXa的方式，而梅干也將這四種半透明的作法，實作出來各位也可參考一下囉！