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面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
javascript中的面向对象
Mar 30 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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/08 其他游戏
PHP递归调用的小技巧讲解
2013/02/19 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python中import与from方法总结(推荐)
2019/03/21 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
咖啡书吧创业计划书
2014/01/13 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
酒店员工培训方案
2014/06/02 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
导游词之塘栖古镇
2019/12/04 职场文书