新沂愿低健康管理有限公司

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

如何讓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不能實(shí)現(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 : 可選項(xiàng)。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true | false
true :  默認(rèn)值。濾鏡激活。
false :  濾鏡被禁止。
sizingMethod : 可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式。
crop : 剪切圖片以適應(yīng)對象尺寸。
image : 默認(rèn)值。增大或減小對象的尺寸邊界以適應(yīng)圖片的尺寸。
scale : 縮放圖片以適應(yīng)對象的尺寸邊界。

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

 

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

福鼎市| 兴业县| 沅江市| 梁山县| 黄平县| 寿阳县| 黄冈市| 望都县| 新宁县| 富平县| 扬州市| 凌海市| 平山县| 天峨县| 兴宁市| 宜兴市| 安图县| 改则县| 兴城市| 镇江市| 金沙县| 奎屯市| 鄂温| 林口县| 通化市| 达尔| 富锦市| 内丘县| 铜川市| 南溪县| 公主岭市| 荆门市| 延长县| 邵阳县| 中超| 依兰县| 广灵县| 象州县| 开封县| 巫山县| 大冶市|