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 相关文章推荐
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
js获取url传值的方法
Dec 18 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
大学生英语演讲稿
2014/04/24 职场文书
争做文明公民倡议书
2014/08/29 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
人民调解协议书
2016/03/21 职场文书