CSS設定透明度與rgba顏色模式

之前我寫過一篇關於CSS透明度的文章，抱怨CSS對一個元素設定透明度後，導致它裡面的元素也跟著透明了。最近我發現，其實這樣挺好的。

有時候我們想要一個背景半透明文字不透明的效果，比如一個“資訊警告框”，但當我們給這個元素加上opacity屬性後，發現背景和他裡面的所有東西都半透明了，導致辨認困難。

如果你硬揪著opacity不放，你會發現用opacity來實現背景半透明文字不透明的效果很困難。於是，像我一樣，覺得W3C關於透明度的設定真是蛋疼。

其實，是我們理解錯了。

如果要背景半透明文字不透明這種效果，只要把background設定成rgba形式就可以了！如：

background:rgba(0,0,0,0.5);

相反，你要文字半透明而背景不管，就把color設定成rgba格式即可！

而在你需要此元素所有子項目都保持一個透明度是，才會用到opacity屬性：

opacity:0.5;

我們可以這樣想，如果你想要某地區裡所有元素都保持一個透明度，但CSS的opacity不能繼承的話，那你將會多麼蛋疼！你需要設定多少個元素的opacity呢？

附一：

所以，我覺得CSS現在的透明度設定挺好的我很贊成——不過，我怎麼又恨起IE來了呢？媽的，IE支援rgba的顏色格式嗎！

原文連結: http://www.jo2.org/archives/291.htm.