IE6下png透明問題解決的最佳方案

本來只是一張png透明圖片,在IE下是很好解決的,我也嘗試了很多種,包括js法,濾鏡css法等等,感覺總體來說都不是很完美,而且如果同時使用Sprites方法,就不是那麼簡單容易的事情了。

最終發現了使用htc方法嵌到css文件中基本可以一次性解決大部分的透明問題。

這種方法已經有很多人介紹過了,但是因爲頁面是英文,很少有人翻譯,也就很少人會去使用。

下面就詳細介紹下這種方法:

此方法本身的demo地址:http://www.twinhelix.com/css/iepngfix/demo/

(說過了是全英文的,不要着急哦)

可解決:

1、頁面中使用《img》標籤加入的png透明圖像

2、css中使用background加入的png透明背景(支持多種版本)

3、某些版本的background的png透明,需要在當前頁添加一個js解決

下載文件包:http://www.twinhelix.com/css/iepngfix/iepngfix.zip

1、下載後,解壓出來,會有很多文件,其中我們需要用到的有3個文件:

iepngfix.htc,blank.gif,iepngfix_tilebg.js

2、你可以把他們分別傳到相應的css,js和images目錄中,當然,也可以建立新的文件夾,比如名爲:iepng的文件夾,把他們傳到其中

3、添加第一句代碼,這是在html文件中添加的格式,不要忘記修改htc文件的路徑,如果怕出錯,直接使用相對根目錄的路徑,比如/iepng/iepngfix.htc,這樣一般不會出錯,當然你也可以把behavior: url(iepngfix.htc)這句添加到你的reset.css文件中去

 

<style type="text/css">
img, div { behavior: url(iepngfix.htc); }
</style>

 

 

4、使用記事本,或類似的工具打開iepngfix.htc文件,將其中blankImg的文件路徑替換成你自己的,比如/iepng/blank.gif,根據自己的實際情況。

 

IEPNGFix.blankImg = '/images/blank.gif';

 

5、將下面這句js調用代碼加到需要頁面的《head》中去(此步不是必須的,如果你的head部分的include統一調用的,推薦一定加上這句)

 

<script type="text/javascript" src="iepngfix_tilebg.js"></script>

 

經過以上步驟,基本可以實現IE下png的透明效果了

至少我現在沒發現什麼問題,如果有出現問題,歡迎一起討論下,記得跟我說下哦,謝謝啦!

原文地址:http://blog.sina.com.cn/s/blog_62a8de7a0100ksh2.html

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章