CSS實現背景透明，文字不透明

在設計網頁時，有時需要調整圖片的透明度，如我們所知用CSS調整透明度的作法就是設定opacity屬性，然而設置此屬性的元素都會受到其影響，也就是說，若只是單純想調整圖片的透明度，設定opacity屬性之後，卻會連帶地使得置於其上的文字也一起具有透明性，然而又不希望文字也跟著透明化，這樣的情況該如何解決呢？

一般在設定opacity時可能會如以下情況，以設60%不透明度為例，我們可能會設opacity:0.6，但是如此一來，文字的透明度也跟圖片一起變化了(如最下方範例的第一塊div)，此時我們可以將顏色的設定改以CSS3的rgba(red, green, blue, alpha)來表示，rgba最後的a代表alpha，是指透明度，設定的數值從0到1，例如60%不透明度要設成0.6，rgba(red, green, blue, 0.5)，如最下方範例的第二塊div。

但是這屬性IE6、7、8不支持，IE9及以上版本和其他瀏覽器都支持。

因此若是要只針對IE6、7、8的兼容性的話，還有一個方法便是使用filter:Alpha(opacity=x)，x 的取值從 0 到 100，例如60%不透明度便是filter:Alpha(opacity=60) ，範例如最下方的第三塊div。

因為此範例僅是針對IE6、7、8、9，所以對IE10及以上版本和其他瀏覽器不會起作用。

範例：