由于游戲類(lèi)官網(wǎng)在頁(yè)面背景和裝飾人物的設(shè)計(jì)上追求畫(huà)麗且與游戲風(fēng)格想匹配,這就給前端頁(yè)面制作人員帶來(lái)了很多的麻煩,一個(gè)頁(yè)面的制作主要時(shí)間和精力花費(fèi)在兼容ie6上,而
dd_belatedpng.js法
引入js文件
復(fù)制代碼代碼如下:
<!–[if IE 6]>
<script type=”text/javascript” src=”js/dd_belatedpng.js”></script>
<script>
DD_belatedPNG.fix(‘.pngfix’);
</script>
<![endif]–>
然后對(duì)需要進(jìn)行ie6下透明的元素進(jìn)行class標(biāo)注。
特點(diǎn)是在很大程度上能解決png-24的透明問(wèn)題,但是也有幾個(gè)問(wèn)題比較明顯。
1. 需要引入js文件。
2. 他會(huì)動(dòng)態(tài)在png-24圖像上包裹一層css為position:relative;的元素,使原有的position:absolute;的元素消失不見(jiàn)或出現(xiàn)其它意想不到的bug。
解決辦法:在png-24的圖像上再添加一層position:relative;的dom元素,或者不使用絕對(duì)定位或使用其它辦法。
ie濾鏡法
js辦法失效后,可以用這種辦法使圖片透明。
復(fù)制代碼代碼如下:
background:url(/images/game_box.png) 0 0 no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/images/game_box.png’,sizingMethod=’crop’);
當(dāng)然這種辦法的缺點(diǎn):
1. 濾鏡的性能問(wèn)題一直是ie瀏覽器的一個(gè)瓶頸。
2. background-position 無(wú)法實(shí)現(xiàn)。
圖片替換法
在不要求圖片背景滾動(dòng)的情況下,可以在高級(jí)瀏覽器里邊使用png-24的圖片,然后用截圖工具抓取需要透明的區(qū)域,然后直接使用截圖后的圖片。
這種方法的優(yōu)點(diǎn)是沒(méi)有兼容性問(wèn)題,而且在保證圖片大小的情況下能正常顯示,缺點(diǎn)就是操作比較復(fù)雜,而且截圖也會(huì)使圖片的顏色信息造成部分遺失。
瀏覽器區(qū)分法
還有一種辦法是用js判斷是ie6瀏覽后,添加不同的圖片。根據(jù)瀏覽器的不同來(lái)使用不同的圖片。
這個(gè)辦法使用于,用戶(hù)市場(chǎng)比較成熟的產(chǎn)品或界面,不考慮低端ie6瀏覽器使用者,但也保證在瀏覽器下能正常顯示,只是圖片的質(zhì)量稍為差點(diǎn)罷了。
新聞熱點(diǎn)
疑難解答
圖片精選