js去除png格式的图片阴影

最新推荐文章于 2023-01-12 18:32:17 发布

iteye_1789

最新推荐文章于 2023-01-12 18:32:17 发布

阅读量605

点赞数

借用一句话：

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

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

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

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

原始样式(如对应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

<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 οnlοad="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>