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 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
ElementUI radio组件选中小改造
Aug 12 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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图片验证码代码
2008/03/27 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
Javascript中暂停功能的实现代码
2007/03/04 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
使用npm安装最新版本nodejs
2018/01/18 NodeJs
微信小程序实现日历效果
2018/12/28 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
建筑总经理岗位职责
2014/02/02 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
安全保证书怎么写
2015/02/28 职场文书
义卖募捐活动总结
2015/05/09 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang