1、HTML 元素透明

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

 
opacity:.5

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

A 級瀏覽器基本都支持 opacity屬性，但碰上 IE，總沒好事。不過 IE 有濾鏡，可以幫

助我們拐彎抹角地搞定不透明度：

 
filter:alpha(opacity=50);

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

定位來實現。

在CSS3中，還可以使用 HSLA（色調、飽和、亮度、透明度）或者 RGBA（紅、

綠、藍、透明度）來實現元素透明。例如：

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服務器上），會導致濾鏡引用的圖片不可獲取。所

以一旦資源跨域，必須保證圖片地址為絕對路徑。

總結

以上是生活随笔為你收集整理的CSS 元素透明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。