CSS 透明背景的三種設定方法

Kunyu
Jun 17, 2021

--

不是只有RGBa可以設定透明度,事實上RGB就可以!

本文提出我認為最實用的三種方法來做分享,網路文獻還可以查到HEXA、HSLa也可以做到透明度的設定,不過我認為相對麻煩也不常用。

#1 HEX & Opacity

大家熟悉的設定方法,但缺點是整個區塊含區塊內的元素都會是半透明,也就是說文字也會變透明。

background:#000;
opacity: .5;

#2 RGBa

大家熟悉的設定方法。

background: rgba(255,255,2255,0.5);

#3 RGB

一種較少人知道的設定方法,供大家做為參考。

2021/07/08 補充 : 這個寫法SCSS不認識,因此無法被翻譯到CSS。

background: rgb(255 255 255 / 50%);

--

--