網(wǎng)頁設(shè)計(jì)中PNG背景在不同瀏覽器下的應(yīng)用

網(wǎng)頁設(shè)計(jì)中經(jīng)常會(huì)用到png透明圖片用來實(shí)現(xiàn)各種精美的變化特效。關(guān)于PNG透明背景在ie6和FIREFOX瀏覽器下顯示異常。
這里談一下不同瀏覽器內(nèi)，如何應(yīng)用PNG圖片作背景。

一、在IE6中使用PNG背景
IE6本身并不認(rèn)識(shí)PNG圖片的透明特性，雖然有讓IE6支持PNG透明背景的JS程序：

但是如果需要實(shí)現(xiàn)的地方僅有一處，還是用CSS來實(shí)現(xiàn)效率更高一些。這里應(yīng)用的是IE5.5+的AlphaImageLoader濾鏡：

需要注意的是：AlphaImageLoader濾鏡會(huì)導(dǎo)致該區(qū)域的鏈接和按鈕無效，解決的辦法是為鏈接或按鈕添加：position: relative;使其相對(duì)浮動(dòng)。另外AlphaImageLoader無法設(shè)置背景的重復(fù)，所以對(duì)圖片的切圖精度會(huì)有較高要求。

二、在IE7、Opera和firefox中使用PNG背景
這幾款瀏覽器對(duì)PNG背景的支持很好，可以直接應(yīng)用。而實(shí)際應(yīng)用中，我們需要同時(shí)照顧IE6瀏覽器，所以需要給樣式表加上*html來做兼容處理。也就是給同一標(biāo)簽兩次背景。

.uicss_cn{background:transparent url(../images/temp.png) repeat-x bottom left;height:3px;position:absolute;width:100%; font-size:0px;}

注意：無意中發(fā)現(xiàn)，自己插入的PNG背景兼容代碼無效。最后證實(shí)問題出在圖片文件上。使用fireworks生成的部分png圖片，需要導(dǎo)出為PSD格式，再從PS里另存為PNG文件，即可。”