js去除png格式的图片阴影

最新推荐文章于 2023-07-14 11:20:38 发布

最新推荐文章于 2023-07-14 11:20:38 发布 · 202 阅读

本文介绍如何解决IE浏览器中PNG图片透明背景显示问题，通过直接定义CSS和使用JS设置CSS来实现PNG图片在IE浏览器中的正确显示。文章详细解释了IE浏览器的滤镜CSS功能，并提供了具体的代码示例。

借用一句话：

PNG图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利!

但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。

针对以上问题，IE浏览器本身提供了filter(滤镜)的CSS, 可以用来控制背景色。透明呀，模糊呀等等。

基于这个思想可以使用直接设置CSS和使用JS设置CSS两条路径来达成。

原始样式(如对应png图片没找到，可以随意替换一个试试)

<img src="http://online.sccnn.com/icon/1130/pin_001.png"/>

1. 直接定义CSS

<span
style="width:512px;height:512px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://online.sccnn.com/icon/1130/pin_001.png',sizingMethod='scale');">
</span>

这里要定义 width 和 height, 否则无法显示。

2. 使用js设置CSS

<script>
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
     var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
     var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
     var imgTitle = (myImage.title) ? "title='" + myImage.title   + "' " : "title='" + myImage.alt + "' ";
     var imgStyle = "display:inline-block;" + myImage.style.cssText;
     var strNewHTML = "<span " + imgID + imgClass + imgTitle     + " style=\"" + "width:" + myImage.width     + "px; height:" + myImage.height     + "px;" + imgStyle + ";"     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"     + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
     myImage.outerHTML = strNewHTML;
}
} 
<img onload="fixPNG(this)" src="http://online.sccnn.com/icon/1130/pin_001.png"/>
</script>

完整的HTML如下：

<HTML>
<HEAD>
<TITLE> Png Image </TITLE>
<script>
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
     var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
     var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
     var imgTitle = (myImage.title) ? "title='" + myImage.title   + "' " : "title='" + myImage.alt + "' ";
     var imgStyle = "display:inline-block;" + myImage.style.cssText;
     var strNewHTML = "<span " + imgID + imgClass + imgTitle     + " style=\"" + "width:" + myImage.width     + "px; height:" + myImage.height     + "px;" + imgStyle + ";"     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"     + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
     myImage.outerHTML = strNewHTML;
}
} 
</script>
</HEAD>

<BODY>
<img src="http://online.sccnn.com/icon/1130/pin_001.png"/>
<img onload="fixPNG(this)" src="http://online.sccnn.com/icon/1130/pin_001.png"/>
<span
style="width:512px;height:512px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://online.sccnn.com/icon/1130/pin_001.png',sizingMethod='scale');">
</span>

</BODY>
</HTML>