png图片在ie不透明的解决方案

最新推荐文章于 2024-10-25 13:52:23 发布

最新推荐文章于 2024-10-25 13:52:23 发布 · 95 阅读

文章标签：

#IE #Microsoft #CSS

本文介绍了一种在不同浏览器中实现背景图片兼容显示的方法，包括使用特定语法确保Firefox和其他浏览器正确显示背景图片，以及通过JavaScript动态更改背景图片。

background:url("png图片地址")no-repeat!important;background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="png图片地址",sizingmethod=scale);

需要注意的地方是火狐下必须用background不能用background-image，分号是在!important后面，不是在no-repeat后面。

用js动态改变背景图的化无法用设置backgroundImage的方式来设置了，最简单的方法就是设置整个cssText，动态改变图片url地址就可以了，下面给出一个实例：

生成div的部分代码：

"<divid=\""+this.logoid+"\"style=\"position:absolute;left:10px;top:2px;width:18px;height:18px;background:url("+this.logo+")no-repeat!important;background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.logo+",sizingmethod=scale);-moz-user-select:none;\"onselectstart=\"returnfalse;\"></div>"

改变div背景的代码：

this.setLogo=function(imgurl)
{
varcss="position:absolute;left:10px;top:2px;width:18px;height:18px;background:url("
+imgurl+")no-repeat!important;background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="
+imgurl+",sizingmethod=scale);-moz-user-select:none;";
$(this.logoid).style.cssText=css;
}