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限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
js中创建对象的几种方式
Feb 05 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Vue.js对象转换实例
Jun 07 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
浅谈webpack组织模块的原理
Mar 10 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
十分钟教你上手ES2020新特性
Feb 12 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 XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP会话处理的10个函数
2015/08/11 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python可迭代对象操作示例
2019/05/07 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
python实现图像拼接功能
2020/03/23 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
python属于跨平台语言码
2020/06/09 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
大学生职业生涯规划书模板
2014/01/03 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
义诊活动总结
2015/02/04 职场文书
Python读写yaml文件
2022/03/20 Python
nginx共享内存的机制详解
2022/03/21 Servers
Java 死锁解决方案
2022/05/11 Java/Android