神奇的 CSS 元素透明法

1、HTML 元素透明

其實本身，CSS 實現元素透明是件容易事兒。直接上代碼：

opacity:.5

opacity 指的是不透明度，取值為 0~1 之間，1 表示完全不透明，0 表示完全透明。

A 級瀏覽器基本都支持 opacity 屬性，但碰上 IE，總沒好事。不過 IE 有濾鏡，可以幫助我們拐彎抹角地搞定不透明度：

filter:alpha(opacity=50);

注：事實上會碰到透明背景層，而 opacity 屬性是會繼承的，避免這個問題，需要結合定位來實現。

在 CSS3 中，還可以使用 HSLA（色調、飽和、亮度、透明度）或者 RGBA（紅、綠、藍、透明度）來實現元素透明。例如：

background: hsla(0,100%,50%,0.5);background: rgba(0,0,0,0.5);

2、背景圖片透明

有一個值得關注的問題是，PNG8 格式的圖片在 IE6 下僅支持全透明，也就是說，IE6 下使用 PNG8 無法實現背景的半透明效果。透不透明其實有時候無所謂，但問題是全透明狀態下，會導致圖片出現惡心的毛邊。雖然可以在導出 PNG8 時，通過選擇雜邊顏色或者去除雜邊的方式解決，但并不完美。

可喜的是，PNG24 支持全透明，所以 PNG24 就很威猛了，在圖片透明的方案中，它絕對是武力指數最高的。

但碰上 IE，另一個惡心的問題又出現了，IE6 不支持支持半透明的 PNG24 透明圖片（可能有點拗口）。

咋辦？濾鏡！

直接上代碼：

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mangguo.png',sizingMethod='crop');

但碰上 IE6，又悲劇了。在 CSS 文檔和頁面地址不一致時（比如很多網站會將靜態資源放置于和站點本身不同域的 CDN 服務器上），會導致濾鏡引用的圖片不可獲取。所以一旦資源跨域，必須保證圖片地址為絕對路徑。

來源：http://www.mangguo.org/

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