使用新的CSS3的”RGBA”宣告，不僅僅讓我們像通常一樣設定RGB顏色，而且還可以設定其透明度。

RGBA像RGB一樣設定顏色，而這個”A”——RGBA中的最後一個值——允許我們設定該元素的透明度。就像opacity宣告一樣，一個opacity值為1的元素是完全不透明的，而一個opacity為0的元素是完全透明的。

瀏覽器相容性

RGBA現在在Firefox、Google Chrome和Safari中都有比較好的支援，同樣不需要字首。

CSS3 RGBA 色彩

rgba

上面的效果有以下樣式實現：

div.rgbaL1 { background:rgba(153, 134, 117, 0.2); height:20px; }  
div.rgbaL2 { background:rgba(153, 134, 117, 0.4); height:20px; }  
div.rgbaL3 { background:rgba(153, 134, 117, 0.6); height:20px; }  
div.rgbaL4 { background:rgba(153, 134, 117, 0.8); height:20px; }  
div.rgbaL5 { background:rgba(153, 134, 117, 1.0); height:20px; }

瀏覽器支援

  • Firefox 3.05+
  • Google Chrome 1.0 +
  • Internet Explorer 9+
  • Opera 9.6-
  • Opera 10.0+
  • Safari 3.2.1+

CSS3系列教程|前端觀察

特別宣告，本系列文章譯自：Zen Elements，非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate from Zen Elements, thanks Alex for his great work so much.