让png格式图片在网页中透明显示,让IE8支持半透明效果滤镜

时间：2023-01-09 06:04:42

把这段代码插入head里面。。

<script language="javascript" type="text/javascript">
function correctPNG() 
     {
     for(var i=0; i<document.images.length; i++)
        {
        var img = document.images
        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>


或者：

把这个插入需要的页面里：

<!--[if lt IE 7]>
<script defer type="text/javascript" src="png.js"></script>
<![endif]-->


以下存为：png.js 调用

 

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
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');\">"
img.outerHTML = strNewHTML
i = i-1
}
}
}
</document>


这两种方法都能解决png图片在网页中透明部分变灰色的问题～～
补充一下：上面方法只能针对 <img src=""> 这样插入页面中的图片。对于应用在背景中的png格式图片不能起到作用。这时候，你需要在css中针对背景图片插入这样的代码：
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=绝对路径,);
这段代码也是从网上发掘来的，发现很实用，把原文说明贴在下面：
AlphaImageLoader兼容性：IE5.5+

語法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

屬性：
enabled   : 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false true   : 默認值。濾鏡激活。
false   : 濾鏡被禁止。

sizingMethod   : 可選項。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對像容器邊界內的顯示方式。 crop   : 剪切圖片以適應對像尺寸。
image   : 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
scale   : 縮放圖片以適應對象的尺寸邊界。

src   : 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會作用。
特性：
Enabled   : 可讀寫。布爾值(Boolean)。參閱 enabled 屬性。
sizingMethod   : 可讀寫。字符串(String)。參閱 sizingMethod 屬性。
src   : 可讀寫。字符串(String)。參閱 src 屬性。
 
解决IE8不支持透明滤镜：
这样写　filter:alpha(opacity=50)，现在IE8不支持了。

这种写法还不知道解决什么的　-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=50)”;

IE7、IE8里可以这样写　filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

FireFoX里可以这样写：opacity:0.5

标签：

相关文章