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 相关文章推荐
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
详解JavaScript中的坐标和距离
May 27 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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP代码优化的53个细节
2014/03/03 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
smarty模板数学运算示例
2016/12/11 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
Prototype String对象 学习
2009/07/19 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
Python文件的读写和异常代码示例
2017/10/31 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
使用python3实现操作串口详解
2019/01/01 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
结构工程个人自荐信范文
2013/11/30 职场文书
请假条标准格式规范
2014/04/10 职场文书
心理咨询承诺书
2014/05/20 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
公司保密管理制度
2015/08/04 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL