常用的兩種解決方案:
第一:使用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方法中去。