IE瀏覽器PNG圖片透明效果代碼
更新時間：2008年09月02日 15:43:06 作者：
平常，我們經(jīng)常使用Gif格式的圖片以保持圖片在瀏覽器中透明，以支持底色。但由于IE瀏覽器本身的原因，我們無法使透明的PNG圖片透明起來。那么，如何將它在IE瀏覽器下變得透明呢？
首先看我們的<img>標(biāo)簽代碼：
<img src="Example.png" border="0" alt="放大鏡" />
我們將利用IE中特有的特效來滿足這個要求，這就是AlphaImageLoader Filter (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp)
如何做？
將下面代碼保存為correctPNG.js:
復(fù)制代碼 代碼如下:
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; margin:6px; 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);
然后在你需要透明的網(wǎng)頁中的<head>....</head>區(qū)加入：<script type="text/javascript" src="correctPNG.js"></script>
在<body>區(qū)加入多個與<img src="Example.png" border="0" alt="放大鏡" />類似的PNG圖片，試試看？
另一種方法：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>alpha image</title>
<style type="text/css">
.pngholder{
width:100px;
height:100px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://m.fzitv.net/attachments/200510/03_124401_ie.png');
}
.pngalpha{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
background:url(http://m.fzitv.net/attachments/200510/03_124401_ie.png) no-repeat;
width:100px;
height:100px;
}
</style>
</head>
<body bgcolor="#3399ff#">
<!- And this is your code to implement the image ->
<div>透明</div>
<div class="pngholder"><div class="pngalpha"></div></div>
<div>不透明</div>
<img src="http://m.fzitv.net/attachments/200510/03_124401_ie.png"/>
</body>
</html>
您可能感興趣的文章:
- PNGHandler-借助JS讓PNG圖在IE下實現(xiàn)透明（包括背景圖）
- IE瀏覽器打不開PNG格式圖片的解決
- js png圖片(有含有透明)在IE6中為什么不透明了
- DD_belatedPNG,IE6下PNG透明解決方案(國外)
- 在IE和VB中支持png圖片透明效果的實現(xiàn)方法(vb源碼打包)
- ie6下png圖片背景不透明的解決辦法使用js實現(xiàn)
- jQuery 淡入淡出 png圖在ie8下有黑色邊框的解決方法
- 解決IE6的PNG透明JS插件使用介紹
- 基于Unit PNG Fix.js有時候在ie6下不正常的解決辦法
- JS解決ie6下png透明的方法實例
- png在IE6 下無法透明的解決方法匯總
- IE瀏覽器下PNG相關(guān)功能
相關(guān)文章
微信小程序開發(fā)實現(xiàn)首頁彈框活動引導(dǎo)功能
自己x實現(xiàn)的一個比較簡單微信彈窗功能,主要就是教會大家對微信彈窗的用法和理解,這篇文章主要給大家介紹了關(guān)于微信小程序如何實現(xiàn)首頁彈框活動引導(dǎo)功能的相關(guān)資料,需要的朋友可以參考下2021-08-08
JS常見問題在開發(fā)過程中會經(jīng)常遇到過，本文整理了一些實際開發(fā)中存在的問題，曬出來與大家一起分享，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要介紹了使用JavaScript輕松實現(xiàn)拖拽功能,讓你的網(wǎng)頁動起來,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
JavaScript?字符串新增方法?trim()?的使用說明
這篇文章主要介紹了JavaScript字符串新增方法trim()的使用說明，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
本篇文章主要是對js通過八個點 拖動改變div大小的實現(xiàn)方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
寫了個獲取多個tagname節(jié)點集合的小方法。類似于jQuery的$(‘iput,select,textarea’,'#form’)的效果，返回是按節(jié)點在原有文檔流中的順序返回的2013-09-09
js 實現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)
下面小編就為大家?guī)硪黄猨s 實現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
js如何將多個json結(jié)構(gòu)組成的字符串轉(zhuǎn)換為數(shù)組？
接口返回的EventStream結(jié)構(gòu)的數(shù)據(jù),由于http流式傳輸時,可能會分段,所以導(dǎo)致本該每次返回一段json數(shù)據(jù)結(jié)構(gòu)的字符串,變成了多個json數(shù)據(jù)結(jié)構(gòu)的字符串拼接在了一起,本文講述js如何將多個json結(jié)構(gòu)組成的字符串轉(zhuǎn)換為數(shù)組2024-08-08
創(chuàng)建一個復(fù)制UBB軟件信息的鏈接或按鈕的js代碼
2008-01-01
在小程序項目開發(fā)過程中常遇到自定義導(dǎo)航欄的需求,所以下面這篇文章主要給大家介紹了關(guān)于微信小程序自定義導(dǎo)航欄及其封裝的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12