PNG背景在不同浏览器下的应用

更新时间：2009年06月22日 00:16:29 作者：

论坛中kayeun在我的版面发了一个问题，关于PNG透明背景在FIREFOX浏览器下显示异常。这里谈一下不同浏览器内，如何应用PNG图片作背景。

一、在IE6中使用PNG背景
IE6本身并不认识PNG图片的透明特性，虽然有让IE6支持PNG透明背景的JS程序：

function correctPNG() 
{ 
var arVersion = navigator.appVersion.split("MSIE") 
var version = parseFloat(arVersion[1]) 
if ((version >= 5.5) && (document.body.filters)) 
{ 
for(var j=0; j<document.images.length; j++) 
{ 
var img = document.images[j] 
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 
j = j-1 
} 
} 
} 
} 
window.attachEvent("onload", correctPNG); 

但是如果需要实现的地方仅有一处，还是用CSS来实现效率更高一些。这里应用的是IE5.5+的AlphaImageLoader滤镜：

复制代码代码如下:

filter: 
progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src='temp.png',sizingMethod='scale') 

需要注意的是：AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;使其相对浮动。另外AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有较高要求。
二、在IE7、Opera和firefox中使用PNG背景
这几款浏览器对PNG背景的支持很好，可以直接应用。而实际应用中，我们需要同时照顾IE6浏览器，所以需要给样式表加上*html来做兼容处理。也就是给同一标签两次背景。
例如：

复制代码代码如下:

.uicss_cn{background:transparent url(../images/temp.png) repeat-x bottom left;height:3px;position:absolute;width:100%; font-size:0px;} 
*html .uicss_cn{background:transparent; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/temp.png", sizingMethod="crop");} 

三、补充一点
3月27号，无意中发现，自己插入的PNG背景兼容代码无效。最后证实问题出在图片文件上。使用fireworks生成的部分png图片，需要导出为PSD格式，再从PS里另存为PNG文件，即可。

PNG
背景

利用Echarts实现图例显示百分比效果
EChart开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。本文将利用EChart实现图例中显示百分比的效果，感兴趣的可以学习一下
2022-03-03
学习JavaScript设计模式(策略模式)
这篇文章主要带领大家学习JavaScript设计模式，其中重点介绍策略模式，以年终奖为实例对策略模式进行分析，对策略模式进行详细剖析，感兴趣的小伙伴们可以参考一下
2015-11-11
Javascript中的对象和原型(二)
这篇文章给大家介绍了js中的对象和原型，从工厂模式，构造函数方面展开话题，介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
怎样在CocosCreator中使用物理引擎关节
这篇文章主要介绍了怎样在CocosCreator中使用物理引擎关节，对物理引擎感兴趣的同学，着重要看一下
2021-04-04
Stop SQL Server
Stop SQL Server...
2007-06-06
layer.open的自适应及居中及子页面标题的修改方法
今天小编就为大家分享一篇layer.open的自适应及居中及子页面标题的修改方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript中如何计算字符串文本的宽度
这篇文章主要介绍了JavaScript中如何计算字符串文本的宽度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
js继承的实现代码
学着js的继承，自己也写了个。感觉不是很好。现在很多代码都封装成类。
2010-08-08
js模拟实现Array的sort方法
JavaScript的Array对象有一个sort方法，用于实现对数组元素的排序，该方法默认按照数组项ASCII 字符顺序升序排列。这篇文章重点给大家介绍js模拟实现Array的sort方法，一起看看吧
2007-12-12
JavaScript封装axios的实现详解
这篇文章主要介绍了JavaScript封装axios的实现，Axios是一个开放源代码库，使我们可以轻松地发出HTTP请求。实际上，它是通过额外的超能力来fetch
2022-09-09