溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

ie6中png透明的方法是怎樣的

發(fā)布時間:2021-10-08 11:40:07 來源:億速云 閱讀:147 作者:柒染 欄目:web開發(fā)

ie6中png透明的方法是怎樣的,針對這個問題,這篇文章詳細介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

由于游戲類官網(wǎng)在頁面背景和裝飾人物的設(shè)計上追求畫麗且與游戲風格想匹配,這就給前端頁面制作人員帶來了很多的麻煩,一個頁面的制作主要時間和精力花費在兼容ie6上,而

dd_belatedpng.js法

引入js文件

代碼如下:


<!--[if IE 6]>
<script type="text/javascript" src="js/dd_belatedpng.js"></script>
<script>
   DD_belatedPNG.fix('.pngfix');
</script>
<![endif]-->

然后對需要進行ie6下透明的元素進行class標注。

特點是在很大程度上能解決png-24的透明問題,但是也有幾個問題比較明顯。

1. 需要引入js文件。

2. 他會動態(tài)在png-24圖像上包裹一層css為position:relative;的元素,使原有的position:absolute;的元素消失不見或出現(xiàn)其它意想不到的bug。

解決辦法:在png-24的圖像上再添加一層position:relative;的dom元素,或者不使用絕對定位或使用其它辦法。

ie濾鏡法

js辦法失效后,可以用這種辦法使圖片透明。

代碼如下:


background:url(/images/game_box.png) 0 0 no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/game_box.png',sizingMethod='crop');

當然這種辦法的缺點:

1. 濾鏡的性能問題一直是ie瀏覽器的一個瓶頸。
2. background-position 無法實現(xiàn)。

圖片替換法

在不要求圖片背景滾動的情況下,可以在高級瀏覽器里邊使用png-24的圖片,然后用截圖工具抓取需要透明的區(qū)域,然后直接使用截圖后的圖片。

這種方法的優(yōu)點是沒有兼容性問題,而且在保證圖片大小的情況下能正常顯示,缺點就是操作比較復雜,而且截圖也會使圖片的顏色信息造成部分遺失。

瀏覽器區(qū)分法

還有一種辦法是用js判斷是ie6瀏覽后,添加不同的圖片。根據(jù)瀏覽器的不同來使用不同的圖片。

這個辦法使用于,用戶市場比較成熟的產(chǎn)品或界面,不考慮低端ie6瀏覽器使用者,但也保證在瀏覽器下能正常顯示,只是圖片的質(zhì)量稍為差點罷了。

關(guān)于ie6中png透明的方法是怎樣的問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI