西南啄帜国际贸易有限公司

專業(yè)的廣州網(wǎng)站建設(shè)、廣州網(wǎng)站制作公司為您服務(wù),電話:020-85548809,29883069 手機訪問
微信關(guān)注
關(guān)注奇億廣州網(wǎng)站建設(shè)微信
網(wǎng)站導(dǎo)航
新聞中心
首頁>新聞中心>網(wǎng)頁設(shè)計

如何讓PNG圖片透明兼容IE/FF等瀏覽器

添加時間:2012/9/20 10:21:53    編輯:奇億網(wǎng)站建設(shè)公司

一:當(dāng)PNG作圖片插入時,以下代碼一定要放于body內(nèi):

<script language="javascript" type="text/javascript">  
function correctPNG()
{  
var arVersion = navigator.appVersion.split("MSIE")  
var version = parseFloat(arVersion[1])  
if ((version == 6.0) && (document.body.filters))//此處為兼容IE6、8,于是等于6.0,若>=6.0則IE8不能實現(xiàn)

{  
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>

用法直接插入PNG即可:<img src="*.png">

 

一:當(dāng)PNG作背景圖片時:
<style type="text/css">
#bg {
 width:100px;
 height:100px;
 background-image:url(images/bg_01.png)
}
* html #bg  {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/bg_01.png");
 background:none;
}
</style>

<div ></div>

 屬性:
enabled : 可選項。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true | false
true :  默認(rèn)值。濾鏡激活。
false :  濾鏡被禁止。
sizingMethod : 可選項。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式。
crop : 剪切圖片以適應(yīng)對象尺寸。
image : 默認(rèn)值。增大或減小對象的尺寸邊界以適應(yīng)圖片的尺寸。
scale : 縮放圖片以適應(yīng)對象的尺寸邊界。

注意:當(dāng)PNG做背景圖片時,有超鏈接的會被擋住。

 

以上代碼通過IE6、IE7、IE8、ff、Opera、Safari等瀏覽器。

巴南区| 汉中市| 姚安县| 晋州市| 东辽县| 太湖县| 大连市| 喀喇| 新兴县| 高唐县| 东辽县| 彭阳县| 泸定县| 定西市| 五台县| 望江县| 吉安县| 宝丰县| 田东县| 英超| 五台县| 金秀| 牟定县| 资中县| 广德县| 东阿县| 蓬莱市| 龙胜| 黄平县| 泰顺县| 拜城县| 新泰市| 尚义县| 昌宁县| 行唐县| 阿勒泰市| 平山县| 富平县| 织金县| 禄劝| 获嘉县|