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實(shí)現(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)簽實(shí)現(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中的效果
正常顯示的效果
針對(duì)以上情況只需要在代碼中最后加上下面這一段代碼就可以解決了
<!--[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)點(diǎn)：
1、綠色無插件；
2、效率高，速度快；
3、網(wǎng)速慢的時(shí)候，不會(huì)出現(xiàn)先灰底再透明的情況，支持遠(yuǎn)程圖片；
4、支持Hover等偽類，但是得使用兩張圖片，網(wǎng)速慢的情況下，會(huì)導(dǎo)致第二張圖片暫時(shí)無法顯示，因?yàn)檫€沒有完全載入；
缺點(diǎn)：
1、不支持平鋪，雖然filter有sizingMethod="scale", 拉伸縮放模式，但是圖片會(huì)變形，如果單純的顏色或簡(jiǎn)單的漸變色還能橫向平鋪；
2、不支持Img標(biāo)簽；
3、不支持CSS Sprite；
使用情況：
1、當(dāng)沒有img引入png時(shí)可考慮；
2、當(dāng)沒有CSS Sprite需求時(shí)可考慮；
3、當(dāng)沒有平鋪需求時(shí)候可考慮；
二、利用JS解決html中的img(插入在網(wǎng)頁中的png圖像)png背景灰問題
頁面中插入一段js即可。原理同上，只是將img標(biāo)簽用<span>標(biāo)簽替換掉，并且通過濾鏡設(shè)置該<span>標(biāo)簽的background。它會(huì)將所有插入的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時(shí)才有用，所以為了讓我們的頁面更加高效的執(zhí)行，我們可以將上方代碼修改如下，只有IE6的時(shí)候才調(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直接寫選擇器即可，但是為了保險(xiǎn)，建議咱們還是加上:hover：
DD_belatedPNG.fix("#links,#link:hover");
寫到這里并且您使用過jQuery或者CSSQuery類庫，那么您一定熟悉上面的這種選擇方法，總之就是，在CSS中您是如何選擇的元素，那么在這個(gè)js函數(shù)（方法）中傳入什么，只不過多個(gè)選擇的時(shí)候，使用逗號(hào)隔開即可。
小技巧：如果頁面中存在很多png，DD_belatedPNG.fix();函數(shù)的參數(shù)豈不是很長(zhǎng)？我們可以使用這種寫法：
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
如果使用上述的寫法，我們的html中只需要在相對(duì)應(yīng)的標(biāo)簽上加入class="pngFix"就行了，如果有多個(gè)類樣式，按照平時(shí)的多個(gè)類樣式的寫法即可class="abc cbc pngFix"，
使用此方法的時(shí)候，我們每次都要加載兩個(gè)js文件或者寫兩個(gè)<script>標(biāo)簽才行，這樣不太好，http請(qǐng)求會(huì)增多，那么我們可以打開DD_belatedPNG.js文件，在尾部加入如下代碼
即可：
window.onload= function()
{
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
}
這樣我們只需要引入此JS，在需要透明的標(biāo)簽上加入class="pngFix"即可，簡(jiǎn)單 · 方便 · 快捷！
優(yōu)點(diǎn)：
1、CSS代碼無需任何修改，按照平時(shí)的思路來寫即可；
2、無需配置；
3、沒有多余的gif圖片；
4、支持img；
5、支持平鋪；
6、支持CSS Sprite；
7、支持Hover等偽類；
缺點(diǎn)：
1、額外加入了js文件（6.39k）和http請(qǐng)求，可以忽略不計(jì)；
2、當(dāng)文件載入之前，會(huì)先暫時(shí)呈現(xiàn)灰底；
3、js文件過多的時(shí)候，可能會(huì)報(bào)錯(cuò)，導(dǎo)致js無法正常運(yùn)行（這種情況極少出現(xiàn)，可以忽略不計(jì)）；
以上就是本文講述IE6兼容透明背景圖片及解決方案的全部?jī)?nèi)容，希望對(duì)大家有所幫助。
相關(guān)文章
基于JS實(shí)現(xiàn)父組件的請(qǐng)求服務(wù)過程解析
這篇文章主要介紹了基于JS實(shí)現(xiàn)父組件的請(qǐng)求服務(wù)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了webstorm中vue語法的支持詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
js實(shí)現(xiàn)動(dòng)態(tài)改變字體大小代碼
本文為大家介紹下使用js如何實(shí)現(xiàn)動(dòng)態(tài)改變字體大小，感興趣的額朋友不要錯(cuò)過2014-01-01
這篇文章主要介紹了微信小程序 select 下拉框組件功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Javascript寫了一個(gè)清除“l(fā)ogo1_.exe”的殺毒工具（可掃描目錄）
Javascript寫了一個(gè)清除“l(fā)ogo1_.exe”的殺毒工具（可掃描目錄）...2007-02-02
JavaScript使用?for...in?、?for...of?或者?forEach()?遍歷元素的示例
for...in?、?for...of?和?forEach?都是用于循環(huán)遍歷集合元素的方法,但它們之間有一些重要的區(qū)別,本文通過實(shí)例代碼介紹JavaScript使用?for...in?、?for...of?或者?forEach()?遍歷元素的相關(guān)知識(shí),感興趣的朋友一起看看吧2023-09-09
一文詳解如何在uniapp中優(yōu)雅地使用WebView
最近工作中遇到webview,對(duì)于我這個(gè)剛接觸前端的小白來說真的不懂啥意思,下面這篇文章主要給大家介紹了關(guān)于如何在uniapp中優(yōu)雅地使用WebView的相關(guān)資料,需要的朋友可以參考下2023-01-01
簡(jiǎn)單純js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
選項(xiàng)卡效果代碼，無jq,JS來實(shí)現(xiàn)，灰色風(fēng)格，沒有怎么美化，或許看上去比較普通，不過兼容性和操作起來挺舒服的，風(fēng)格適用于大部分的網(wǎng)站，或許你會(huì)用得上。2015-08-08
js閉包的6種應(yīng)用場(chǎng)景總結(jié)
如果一個(gè)函數(shù)訪問了此函數(shù)的父級(jí)及父級(jí)以上的作用域變量,那么這個(gè)函數(shù)就是一個(gè)閉包,本文將給大家分享js閉包的6種應(yīng)用場(chǎng)景,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
JavaScript文件的同步和異步加載的實(shí)現(xiàn)代碼
本篇文章主要介紹了JavaScript文件的同步和異步加載的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08