IE6兼容透明背景圖片及解決方案
首先給大家展示效果圖：
JS代碼：
<!--[if IE 6]>
<script src="~/Scripts/UI/DD_belatedPNG.js"></script>
<script>
$(function () {
//1、通過公共類
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
//2、直接用選擇器：類名，ID，標(biāo)簽
DD_belatedPNG.fix(".imgpng,img");
});
</script>
<![endif]-->
html代碼：
<div class="contain">
<h1>DD_belatedPNG實現(xiàn)IE6下的透明背景</h1>
<div class="con">
<h2>1、通過公共類pngFix</h2>
<p>
window.onload = function () {
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
}
</p>
<img src="../../Content/IMG/IE6.png" alt="" class="pngFix" />
<div class="imgpng pngFix"></div>
</div>
<div class="con">
<h2>2、直接用選擇器：類名，ID，標(biāo)簽實現(xiàn)</h2>
<p>
DD_belatedPNG.fix(".imgpng,img");
</p>
<img src="../../Content/IMG/IE6.png" alt="" />
<div class="imgpng"></div>
</div>
</div>
css代碼：
<style>
.contain { width: 1000px; height: 300px; margin: 0 auto; background: #fff; }
.contain .con { width: 400px; float: left; }
.contain h1 { font-size: 18px; color: #333; margin-bottom: 10px; }
.contain h2 { font-size: 16px; color: #333; }
.imgpng { width: 200px; height: 150px; background: url(/Content/IMG/Ie6.png); }
</style>
ie6中的透明圖片不是透明顯示的解決方案
一些圖片存在著瀏覽器的兼容性，本身是透明的圖片在ie6中卻是不透明，比如：
在ie6中的效果
正常顯示的效果
針對以上情況只需要在代碼中最后加上下面這一段代碼就可以解決了
<!--[if IE 6]>
<script type="text/javascript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span "+ imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
correctPNG();
</script>
<![endif]-->
IE6PNG透明解決方案
一、使用濾鏡 代碼：
#pics
{
background:url(../images/Logo.png)no-repeat;
/*以下為IE6設(shè)置PNG透明代碼*/
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/Logo.png");
}
提示：如果需要使其支持鏈接的hover，那么需要在CSS中定義：cursor:pointer;使其呈現(xiàn)手型，否則將為默認(rèn)的鼠標(biāo)狀態(tài)。
優(yōu)點：
1、綠色無插件；
2、效率高，速度快；
3、網(wǎng)速慢的時候，不會出現(xiàn)先灰底再透明的情況，支持遠(yuǎn)程圖片；
4、支持Hover等偽類，但是得使用兩張圖片，網(wǎng)速慢的情況下，會導(dǎo)致第二張圖片暫時無法顯示，因為還沒有完全載入；
缺點：
1、不支持平鋪，雖然filter有sizingMethod="scale", 拉伸縮放模式，但是圖片會變形，如果單純的顏色或簡單的漸變色還能橫向平鋪；
2、不支持Img標(biāo)簽；
3、不支持CSS Sprite；
使用情況：
1、當(dāng)沒有img引入png時可考慮；
2、當(dāng)沒有CSS Sprite需求時可考慮；
3、當(dāng)沒有平鋪需求時候可考慮；
二、利用JS解決html中的img(插入在網(wǎng)頁中的png圖像)png背景灰問題
頁面中插入一段js即可。原理同上，只是將img標(biāo)簽用<span>標(biāo)簽替換掉，并且通過濾鏡設(shè)置該<span>標(biāo)簽的background。它會將所有插入的PNG都如此處理。
<!--[if IE 6]>
<script>
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " :"";
var imgClass = (img.className) ? "class='" + img.className + "'" : "";
var imgTitle = (img.title) ? "title='" + img.title + "' " :"title='" + img.alt + "' ";
var imgStyle = "display:inline-block;" + img.style.cssText;
if (img.align == "left") imgStyle = "float:left;" +imgStyle;
if (img.align == "right") imgStyle = "float:right;" +imgStyle;
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
var strNewHTML = "<span "+ imgID + imgClass + imgTitle +"style=\"" + "width:" + img.width + "px;height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" +"(src='" + img.src + "',sizingMethod='scale');\"></span>";
img.outerHTML = strNewHTML;
i = i-1;
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
三、DD_belatedPNG.js文件
1、引入js文件，同樣由于此js只有使用IE6時才有用，所以為了讓我們的頁面更加高效的執(zhí)行，我們可以將上方代碼修改如下，只有IE6的時候才調(diào)用執(zhí)行此JavaScript：
<!--[ifIE 6]><scripttype="text/javascript"src="js/DD_belatedPNG.js"></script><![endif]-->
2、調(diào)用函數(shù)，設(shè)置參數(shù)如下：
DD_belatedPNG.fix("#pngImg,#pics,#picsRepeat");
其中傳入的參數(shù)為所使用png圖片的標(biāo)簽的ID、類樣式和標(biāo)簽名稱，同樣也可以按照下方這樣來寫
DD_belatedPNG.fix("#contentimg");
此方法則表示#content下的所有img標(biāo)簽透明
如果為鏈接和鏈接的hover設(shè)置透明，那么您按照下方這么來寫，在部分版本里面可以不用加入:hover直接寫選擇器即可，但是為了保險，建議咱們還是加上:hover：
DD_belatedPNG.fix("#links,#link:hover");
寫到這里并且您使用過jQuery或者CSSQuery類庫，那么您一定熟悉上面的這種選擇方法，總之就是，在CSS中您是如何選擇的元素，那么在這個js函數(shù)（方法）中傳入什么，只不過多個選擇的時候，使用逗號隔開即可。
小技巧：如果頁面中存在很多png，DD_belatedPNG.fix();函數(shù)的參數(shù)豈不是很長？我們可以使用這種寫法：
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
如果使用上述的寫法，我們的html中只需要在相對應(yīng)的標(biāo)簽上加入class="pngFix"就行了，如果有多個類樣式，按照平時的多個類樣式的寫法即可class="abc cbc pngFix"，
使用此方法的時候，我們每次都要加載兩個js文件或者寫兩個<script>標(biāo)簽才行，這樣不太好，http請求會增多，那么我們可以打開DD_belatedPNG.js文件，在尾部加入如下代碼
即可：
window.onload= function()
{
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
}
這樣我們只需要引入此JS，在需要透明的標(biāo)簽上加入class="pngFix"即可，簡單 · 方便 · 快捷！
優(yōu)點：
1、CSS代碼無需任何修改，按照平時的思路來寫即可；
2、無需配置；
3、沒有多余的gif圖片；
4、支持img；
5、支持平鋪；
6、支持CSS Sprite；
7、支持Hover等偽類；
缺點：
1、額外加入了js文件（6.39k）和http請求，可以忽略不計；
2、當(dāng)文件載入之前，會先暫時呈現(xiàn)灰底；
3、js文件過多的時候，可能會報錯，導(dǎo)致js無法正常運行（這種情況極少出現(xiàn)，可以忽略不計）；
以上就是本文講述IE6兼容透明背景圖片及解決方案的全部內(nèi)容，希望對大家有所幫助。
相關(guān)文章
JsDom編程小結(jié)，需要進(jìn)行dom操作的朋友可以參考下。2011-08-08
參考discuz的msn聊天功能代碼2008-05-05
談及過年，最先讓人想到的就是，噼里啪啦的鞭炮聲。本文將利用JavaScript實現(xiàn)一個簡單的放鞭炮動畫效果，感興趣的小伙伴可以了解一下2023-01-01
Javascript 檢測鍵盤按鍵信息及鍵碼值對應(yīng)介紹
Javascript中有3個事件句柄在對應(yīng)鍵盤的輸入狀態(tài):按鍵被按下（按下按鍵但還沒有抬起）、點擊按鍵（按下并抬起按鍵）、按鍵抬起（按鍵抬起之后）,接下來詳細(xì)介紹，感興趣的朋友可以了解下2013-01-01
這篇文章主要為大家詳細(xì)介紹了bootstrap表單示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
下面小編就為大家?guī)硪黄猠asyui-datagrid特殊字符不能顯示的處理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
本篇文章主要介紹了深入理解ES6學(xué)習(xí)筆記之塊級作用域綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
error對象是JavaScript的原生對象,當(dāng)程序解析和運行過程中發(fā)生了錯誤,JS引擎就會自動產(chǎn)生并拋出一個error對象的實例,并且程序會終止在錯誤發(fā)生的地方,本文給大家介紹了JS Error錯誤對象的用法,需要的朋友可以參考下2024-04-04
下面小編就為大家?guī)硪黄岸税裩tml表格生成為excel表格的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了js HTML5 Canvas繪制轉(zhuǎn)盤抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08