文檔來源為:從網(wǎng)絡(luò)收集整理 .word版本可編輯.歡迎下載支持 .ie6下png透明最佳解決方案篇一：ie6下png圖片透明的終極解決方案IE6下png透明問題解決的最佳方案XX-07-2311:08[ 小大] 來源:Chinaz 用戶投稿 評(píng)論:18分享至:百度權(quán)重查詢 站長(zhǎng)交易 友情鏈接交換 網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),企業(yè)建站就找 313本來只是一張png透明圖片，在IE下是很好解決的，我也嘗試了很多種，包括js法，濾鏡css法等等，感覺總體來說都不是很完美，而且如果同時(shí)使用 Sprites 方法，就不是那么簡(jiǎn)單容易的事情了。 最終發(fā)現(xiàn)了使用 htc 方法嵌到css文件中基本可以一次性解決大部分的透明問題。這種方法已經(jīng)有很多人介紹過了，但是因?yàn)轫撁媸怯⑽?，很少有人翻譯，也就很少人會(huì)去使用。 下面就詳細(xì)介紹下這種方法：此方法本身的 demo地址：/css/iepngfix/demo/（說過了是全英文的，不要著急哦）可解決：1、頁面中使用《 img》標(biāo)簽加入的 png透明圖像2、css中使用background加入的png透明背景（支持多種版本）3、某些版本的 background 的png透明，需要在當(dāng)前1文檔來源為:從網(wǎng)絡(luò)收集整理 .word版本可編輯.歡迎下載支持 .頁添加一個(gè) js解決下載文件包:/css/iepngfix/1、下載后，解壓出來，會(huì)有很多文件，其中我們需要用到的有3個(gè)文件：iepngfix_2、你可以把他們分別傳到相應(yīng)的 css，js 和images目錄中，當(dāng)然，也可以建立新的文件夾，比如名為： iepng的文件夾，把他們傳到其中3、添加第一句代碼，這是在html文件中添加的格式，不要忘記修改 htc文件的路徑，如果怕出錯(cuò)，直接使用相對(duì)根目錄的路徑，比如 /iepng/ ，這樣一般不會(huì)出錯(cuò)，當(dāng)然你也可以把behavior：url （）這句添加到你的文件中去img,div{behavior:url();}、使用記事本，或類似的工具打開文件，將其中blankImg 的文件路徑替換成你自己的，比如 /iepng/ ，根據(jù)自己的實(shí)際情況。='/images/';5 、將下面這句 js調(diào)用代碼加到需要頁面的《head》中去（此步不是必須的，如果你的 head部分的include 統(tǒng)一調(diào)用的，推薦一定加上這句）經(jīng)過以上步驟，基本可以實(shí)現(xiàn) IE下png的透明效果了2文檔來源為:從網(wǎng)絡(luò)收集整理 .word版本可編輯.歡迎下載支持 .至少我現(xiàn)在沒發(fā)現(xiàn)什么問題，如果有出現(xiàn)問題，歡迎一起討論下，記得跟我說下哦，謝謝啦！ 原文地址：blog_篇二：讓IE6支持png圖片透明七種方法PNG圖像格式介紹：PNG是20世紀(jì)90年代中期開始開發(fā)的圖像文件存儲(chǔ)格式，其目的是企圖替代 GIF和TIFF文件格式，同時(shí)增加一些GIF文件格式所不具備的特 性。流式 網(wǎng)絡(luò)圖形格式(PortableNetworkGraphicFormat ，PNG)名稱來源于非官方的“PNG’sNotGIF ”，是一種位圖文件 (bitmapfile) 存儲(chǔ)格式，讀成“ping”。PNG用來存儲(chǔ)灰度圖像時(shí)，灰度圖像的深度可多到 16位，存儲(chǔ)彩色圖像時(shí)，彩色圖像的深度可多到48位，并且還可 存儲(chǔ)多到16位的α通道數(shù)據(jù)。IE6下PNG背景透明的顯示問題PNG格式比起GIF來表現(xiàn)色彩更豐富，特別是表現(xiàn)漸變以及背景透明的漸變要比 GIF格式出色很多，目前，最新的瀏覽器基本上都支持 PNG格式。但是 IE6不支持PNG背景透明，會(huì)顯示一個(gè)灰色的框。IE6下PNG背景透明的解決辦法.pngImg{background:url(); _background:url();}注意上文的_號(hào)，目前 IE7,8 以及Firefox 瀏覽器等都不支持此CSS語法，只有IE6識(shí)別。因此，其他瀏覽器會(huì)調(diào)用 PNG，而IE6剛調(diào)用GIF。3文檔來源為:從網(wǎng)絡(luò)收集整理 .word版本可編輯.歡迎下載支持 ..濾鏡filter解決IE6下背景灰background:url() repeat-x 00;_background:none;_filter:progid:(src="",sizingMethod="crop");上面的原理是其他調(diào)用 PNG，IE6,則先設(shè)背景沒有， 然后調(diào)用濾鏡使之顯示 PNG圖片。缺陷：IE6下背景無法平鋪，這個(gè)問題很嚴(yán)重。同時(shí)在性能上也有小問題，頁面中次數(shù)不是很多的時(shí)候該辦法還是可行的。AlphaImageLoader 濾鏡會(huì)導(dǎo)致該區(qū)域的鏈接和按鈕無效，解決的辦法是為鏈接或按鈕添加： position: relative;這樣條代碼，使其相對(duì)浮動(dòng)。AlphaImageLoader 無法設(shè)置背景的重復(fù)，所以對(duì)圖片的切圖精度會(huì)有很高的精確度要求。解決IE下的鏈接無效可用最后面的方法：三.利用JS解決html中的img(插入在網(wǎng)頁中的 png圖像)png背景灰問題頁面中插入一段js即可。原理同上，只是將img標(biāo)簽用標(biāo)簽替換掉，并且通過濾鏡設(shè)置該標(biāo)簽的background。它會(huì)將所有插入的 PNG都如此處理。functioncorrectPNG(){4文檔來源為:從網(wǎng)絡(luò)收集整理 .word版本可編輯.歡迎下載支持 .for(vari=0;i {varimg=[i];varimgName=();if((,)=="PNG"){varimgID=()?"id='"++"'":"";varimgClass=()?"class='"++"'":"";varimgTitle=()?"title='"++"'":"title='"++"'";varimgStyle="display:inline-block;"+;if ( == "left") imgStyle = "float:left;" +imgStyle;if(=="right")imgStyle="float:right;"+imgStyle; if () imgStyle ="cursor:hand;" +imgStyle;varstrNewHTML=" +"filter:progid:"+"(src='"++"',sizingMethod='scale');\">";strNewHTML;=i-1;}}}("onload",correctPNG);5文檔來源為:從網(wǎng)絡(luò)收集整理 .word版本可編輯.歡迎下載支持 .四.調(diào)用解決IE6PNG背景灰及拉伸問題此方法來自：/css/iepngfix/ 此方法基于 Winodws平臺(tái)，在Linux下不支持htc,沒有驗(yàn)證過，但有網(wǎng)友發(fā)文證實(shí)。以下片段添加至 css文件PNG背景圖片 class="pngImg"alt="">詳細(xì)的應(yīng)用方法這里就不介紹啦。在逼不得已且身不由己必須使用 PNG的情況下，這種方法應(yīng)該是比較優(yōu)秀的，雖然不能完美的解決 IE6的平鋪，但是至少是實(shí)現(xiàn)了拉伸，使得很多情況下可以代替平鋪來使用。當(dāng)然效率的問題任然是存在五.讓“塊”透明的方法.div{FILTER:alpha(opacity=20);moz-opacity:;opacity:;} 測(cè)試IE6,IE7,IE8,FF2,FF3 均通過。提示：IE6,IE7 需設(shè)置一個(gè)寬度 (100%也行)，否則看不到效果。.DD_belatedPNG,解決IE6不支持PNG絕佳方案整個(gè)互聯(lián)網(wǎng)上解決這個(gè)IE6的透明PNG的方案也是多不勝數(shù),從使用 IE 特有的濾鏡或是 expression, 再到j(luò)avascript+ 透明GIF替代.但是這些方法都有一個(gè)缺點(diǎn) ,就是 不 支 持 CSS 中 backgrond-position 與background-repeat.而我今天介紹 DD_belatedPNG,只需要一個(gè)理由 ,就是它支持6文檔來源為:從網(wǎng)絡(luò)收集整理 .word版本可編輯.歡迎下載支持 .backgrond-position與background-repeat.這是其他js插件不具備的.同時(shí)DD_belatedPNG還支持a:hover屬性,以及.看Demo:/demo/DD_Png/原理這個(gè)js插件使用了微軟的VML語言進(jìn)行繪制,而其他多數(shù)解決PNG問題的js插件用的是AlphaImageLoader濾鏡.使用方法在這里下載DD_文件.DD_belatedPNG/#download在網(wǎng)頁中引用,如下:/*EXAMPLE*/DD_('.png_bg');/* 將.png_bg 改成你應(yīng)用了透明PNG的CSS選擇器,例如我例子中的'.trans'*/有2種調(diào)用函數(shù),一種是DD_(),如上代碼.另一種是fix(), 這中方法需要在函數(shù)內(nèi)指出 css選擇器名.使用a:hover 請(qǐng)留意5-25 更新:如果你也像jutoy 同學(xué)一樣想要用透明 PNG作為a:hover 時(shí)的背景圖片,那么你需要留意你的代碼 ,需要以”a:hover”來作為選擇器 . 否則可能會(huì)導(dǎo)致無法成功 .同時(shí)我也更新了 demo,請(qǐng)需要的更新查看 .接著我們看看正確7文檔來源為:從網(wǎng)絡(luò)收集整理 .word版本可編輯.歡迎下載支持 .的代碼:DD_('.trans,.boxa:hover');.通過javascript和css濾鏡解決IE整站png背景透明問題functionenablePngImages(){varimgArr=("IMG");for(i=0; iif(imgArr[i].().lastIndexOf(".png")!=-1){imgArr[i].="progid:(src='"+imgArr[i].src+"',sizingMethod='auto')";imgArr[i].src="";}if(imgArr[i].(".png")!=-1){varimg=imgArr[i].(5,imgArr[i].);imgArr[i].="progid:(src='"+img+"',sizingMethod='crop')";8文檔來源為:從網(wǎng)絡(luò)收集整理 .word版本可編輯.歡迎下載支持 .imgArr[i].="url()";}}}functionenableBgPngImages(bgElements){for(i=0;i {if(bgElements[i].(".png")!=-1){//alert(bgElements[i]);varimg=bgElements[i].(5,bgElements[i].);bgElements[i].="progid:(src='"+img+"',sizingMethod='crop')";bgElements[i].="url()";}}}varbgElements;enablePngImages();if(bgElements){enableBgPngImages(bgElements);}9文檔來源為:從網(wǎng)絡(luò)收集整理 .word版本可編輯.歡迎下載支持 ..pngImg{behavior:url();}以下片段添加至 html文件一.IE6使用gif，其他則使用png來解決PNG背景灰篇三：IE6下用css方法解決 png圖片透明和 png背景透明的方法現(xiàn)在解決IE6下png圖片的透明問題。首先，說明下,IE6不是不支持 png透明，IE6可以支持8位的png透明圖片，只是不支持 24位的png透明。如果一般是小圖片的話，存儲(chǔ)成 8位的png圖片就可以用。具體步驟如下： 圖片切好后，記得一定要背景透明，然后“文件”、“存儲(chǔ)為 web所用格式”，然后在右邊的下拉框中選擇“png-8位”，然后一步步確定就可以了。小圖片也可以用 gif 圖片，不過有些圖片會(huì)產(chǎn)生鋸齒。具體用哪個(gè)要看情況而定！下面步入正題：圖片的透明。這種圖片是以 img的形式插入到網(wǎng)頁中的。要解決這類圖片的透明問題，只需要給這個(gè)圖片一個(gè)class=“png”類，具體應(yīng)用如下：html代碼：10文檔來源為:從網(wǎng)絡(luò)收集整理 .word版本可編輯.歡迎下載支持 .css代碼如下：{background-image:expression(="none",="progid:(src='" ++ "