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


Posted in Javascript onJune 22, 2009

一、在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文件,即可。
Javascript 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 Javascript
JavaScript 新手24条实用建议[TUTS+]
Jun 21 #Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 #Javascript
javascript 异常处理使用总结
Jun 21 #Javascript
js 匿名调用实现代码
Jun 19 #Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 #Javascript
JS 分号引起的一段调试问题
Jun 18 #Javascript
javascript 一段左右两边随屏滚动的代码
Jun 18 #Javascript
You might like
星际中的相关伤害
2020/03/04 星际争霸
供参考的 php 学习提高路线分享
2011/10/23 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
详解python3实现的web端json通信协议
2016/12/29 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
信息部岗位职责
2013/11/12 职场文书
大学生自荐信
2013/12/11 职场文书
计算机相关的自我评价
2014/01/15 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
观后感格式
2015/06/19 职场文书
四年级语文教学反思
2016/03/03 职场文书