神奇的 CSS 元素透明法

1、HTML 元素透明

其實(shí)本身，CSS 實(shí)現(xiàn)元素透明是件容易事兒。直接上代碼：

opacity:.5

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

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

filter:alpha(opacity=50);

注：事實(shí)上會(huì)碰到透明背景層，而 opacity 屬性是會(huì)繼承的，避免這個(gè)問(wèn)題，需要結(jié)合定位來(lái)實(shí)現(xiàn)。

在 CSS3 中，還可以使用 HSLA（色調(diào)、飽和、亮度、透明度）或者 RGBA（紅、綠、藍(lán)、透明度）來(lái)實(shí)現(xiàn)元素透明。例如：

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

2、背景圖片透明

有一個(gè)值得關(guān)注的問(wèn)題是，PNG8 格式的圖片在 IE6 下僅支持全透明，也就是說(shuō)，IE6 下使用 PNG8 無(wú)法實(shí)現(xiàn)背景的半透明效果。透不透明其實(shí)有時(shí)候無(wú)所謂，但問(wèn)題是全透明狀態(tài)下，會(huì)導(dǎo)致圖片出現(xiàn)惡心的毛邊。雖然可以在導(dǎo)出 PNG8 時(shí)，通過(guò)選擇雜邊顏色或者去除雜邊的方式解決，但并不完美。

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

但碰上 IE，另一個(gè)惡心的問(wèn)題又出現(xiàn)了，IE6 不支持支持半透明的 PNG24 透明圖片（可能有點(diǎn)拗口）。

咋辦？濾鏡！

直接上代碼：

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

但碰上 IE6，又悲劇了。在 CSS 文檔和頁(yè)面地址不一致時(shí)（比如很多網(wǎng)站會(huì)將靜態(tài)資源放置于和站點(diǎn)本身不同域的 CDN 服務(wù)器上），會(huì)導(dǎo)致濾鏡引用的圖片不可獲取。所以一旦資源跨域，必須保證圖片地址為絕對(duì)路徑。

來(lái)源：http://www.mangguo.org/

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)