CSS3 RGBA 屬性高級用法

貌似最近網上對CSS3的討論真的很火，現在講一下CSS3里目前用的比較廣的RGBA屬性的高級使用方法。這個屬性的兼容問題比較簡單，IE8已經支持這個屬性，IE6和IE7也可以通過hack支持。RGBA和CSS2里的RBG屬性差不多，只是RGBA屬性多了一個透明度的定義，CSS3標準里對RGBA屬性的解釋如下：

在現實中，使用三個1~255的十進制數值去定義一個顏色比用百分比更加準確，下面是幾個顏色的RGB數值，大家在使用的時候只需要把00~FF的16進制數值換算成十進制就行了。

如何使用RGBA屬性

RGBA的強大之處在于，通過對透明度的定義和不同層的顏色混合可以呈現出更多的顏色，就像顏料的混合一樣。舉一個例子，我們先為頁面設置一個背景圖片，接著為頁面里的H1里的內容設置一個顏色，例如：

效果如下：

這里可以看到H1并沒有透明效果

但如果我沒對H1設置一個整體的透明度（opacity屬性）的話，效果會變成怎樣呢？

在這里我們看到的效果是整個H1包括文字都呈現50%的透明度。可是文字透明是影響閱讀的，我們用RGBA屬性單獨設置H1的背景色試試。

這是我們可以看到H1的背景成50%透明的白色，但里面的文字還是不透明的黑色。當然，你也可以只讓H1里的文字透明。

只讓文字透明，可以用來創建剪紙效果。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈