202405月202303月202007月201706月201602月08月201501月05月08月09月11月
201401月03月05月06月07月
09月10月11月201305月08月09月11月12月
201201月02月03月05月201101月02月03月04月05月
06月07月08月09月10月
11月12月201001月02月03月04月05月
06月07月08月09月10月
11月12月200901月02月03月04月05月
06月07月08月09月10月
11月12月200801月02月03月04月05月
06月07月08月09月10月
11月12月200701月02月03月04月05月
06月07月08月09月10月
11月12月200601月02月03月04月05月
06月07月08月09月10月
11月12月200502月04月07月08月09月
10月11月12月
修复IE 下PNG 图片不能透明显示的问题
作者:jogocun 日期:2009-02-06 12:14
正在载入,请稍候……
谷歌了一下,找到了很多方法,有用滤镜的,有用JS代码结合css实现的,js代码也有好多种,我逐一测试了这些方法,首先在css加入滤镜效果测试没效果,而且不是对所有浏览器都有效,就试试了js。多种多样的js,去繁从简,用最剪短的js配合css是最方便的了,代码如下:
以我那个畅易下载页面为例子,效果如上面的“文件下载”图片,简述如下 ---
首先在<head></head>或者<body></body>之间加入:
程序代码
<script type="text/javascript">
// 修复 IE 下 PNG 图片不能透明显示的问题
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>
// 修复 IE 下 PNG 图片不能透明显示的问题
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>
也可以把上面的代码存成js格式文件,以<script type="text/javascript" src="bgpng.js"></script>形式调用,现得页面代码精简些了。
然后在需要透明的图片属性那加入onload="fixPNG(this)" ,如:
<div id="bgpng"><img src="http://jogocun.cech.com.cn/images/bg.png" onload="fixPNG(this)" /></div>
最后可根据需要在css中添加:#bgpng{left:375px;top:131px;position:absolute;} 就可以了。关键是那段js以及img属性onload="fixPNG(this)" ,其它的就是自己定义的css样式了,现得美观些吧。 谷歌AD正在载入,请稍候……
点此快速转到评论处,留下您的宝贵见解吧^_^ 本文如需转载,请详细注明出处,尊重版权,尊重别人的劳动成果,谢谢合作哦! |
评论列表 ↓ 点击显示/隐藏2条博友们的评论