1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. [教學] CSS3 半透明背景的四種設定方法 (RGBa、HSLa、Opacity、HEX)

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

2019/04/26

梅問題-[教學] CSS3 背景半透明四種設定方法(RGBa、HSLa、Opacity、HEX)
  雖然CSS3新增許多好用的屬性,來減少製作圖檔的時間,與加快網頁的載入速度,而在CSS3眾多的屬性當中,梅干最常使用到的就是透明背景,這個屬性不但實用,且設定也相當的方便,但在設定這個透明的背景方法,共有四種。

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


一、RGBa(紅,綠,藍,透明):
RGBa應該是大家最熟悉,也是最常使用的,同時它的表示方式也很直覺,就是紅、綠、藍、透明度。
background-color: rgba(,255,204,0.2);
梅問題-[教學] CSS3 背景半透明四種設定方法(RGBa、HSLa、Opacity、HEX)
二、HSLa(色相,飽和度,明度,透明):
而HSLa與RGBa的設定方式,相當的雷同,透明度都是放置最後,前面分別就是色相、飽和度、明度,但這個的表示方式,就較難從數值中,判斷出是什麼顏色。
background:hsla(168,100%,50%,0.3);
梅問題-[教學] CSS3 背景半透明四種設定方法(RGBa、HSLa、Opacity、HEX)
三、HEX & Opacity:
第三種方式,則是透過大家所熟悉的16進位的色碼,再搭配Opacity屬性,將區塊設為半透明,但透過這個Opacity的半透明屬性,有個小缺點就是,整個div區塊內的元素,也會一塊變成半透明的效果。
background:#00ffcc;
opacity: .5;
梅問題-[教學] CSS3 背景半透明四種設定方法(RGBa、HSLa、Opacity、HEX)
四、HEXA:
第四種方式則是透過16進位的色碼來作表示,相信大家對於16進位的色碼,就熟悉許多,同時透過HEX還可搭配一個透明的數值,一樣也是加在最後,只不過它的透明值,不像RGBa那麼好理解,因為全部都是轉為16進位,所以透過HEX設定半透明時,則會有8碼。
background:#00ffcca3;
梅問題-[教學] CSS3 背景半透明四種設定方法(RGBa、HSLa、Opacity、HEX)
以上這四種的半透明顯示方法,下回各位可以試試看,而梅干最近則比較偏愛HEXa的方式,而梅干也將這四種半透明的作法,實作出來各位也可參考一下囉!