DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 解決IE6下不支持 png24的透明圖片問題
解決IE6下不支持 png24的透明圖片問題
編輯:CSS詳解     
常用的兩種解決方案:

第一:使用IE濾鏡解決

關鍵代碼:

CSS代碼

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/School/UploadFiles_7810/201603/20160324084903612.png",sizingMethod="crop");

有幾點注意點:

1:這裡對應的src地址一定是相對於Html頁面的不是相對於CSS路徑的。

2: 只能對單張的 png圖片使用,意思是不能使用background-position的屬性。

3: 必須加上 _background:none 這段。

第二: 使用DD_belatedPNG的JS代碼。

使用DD_belatedPNG.JS可完美的解決IE6下PNG圖片透明問題,並且支持backgrond-position與background-repeat. 這是其他方法所不具備的,同時DD_belatedPNG還支持a:hover屬性,以及<img>。


使用方法:

首先下載JS文件:0.0.8a-min.js (壓縮版) 0.0.8a.JS (未壓縮版本)
之後在頁面中引用代碼:

<!–[if IE 6]> <script type=”text/Javascript” src=”下載下來的JS路徑”></script> <script> DD_belatedPNG.fix(‘CSS選擇器, 應用類型’); </script> <![endif]–>

引用函數是 DD_belatedPNG.fix() , 括號裡分別填寫應用PNG的CSS選擇器(可使用ID選擇器和類選擇器)和應用類型(分為img和background兩種)。

如DD_belatedPNG.fix(‘#box-one, img’) 或者 DD_belatedPNG.fix(‘.header, background’) 等。
更多選擇器的如 DD_belatedPNG.fix(‘#box-one, .header, img,background’);
帶有hover效果的寫成 DD_belatedPNG.fix(‘#box-one, #box-one:hover’)

注意幾點:

第一:DD_belatedPNG插件式支持backgrond-position等定位方法。所以可以使用"雪碧圖"

第二: DD_belatedPNG支持hover方法,但是必須把hover之後的class也寫進fix方法中去。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved