本來只是一張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的透明效果了