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全局变量封装模块实现代码
Nov 28 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
Javascript基础之数组的使用
May 13 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
vue登录注册实例详解
Sep 14 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 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程序员必须清楚的问题汇总
2014/12/18 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
医药营销专业个人自荐信
2013/09/29 职场文书
机械系大学毕业生推荐信
2013/11/27 职场文书
经典演讲稿汇总
2014/05/19 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
入团介绍人意见范文
2015/06/04 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
详解Redis瘦身指南
2021/05/26 Redis
Python基于百度AI实现抓取表情包
2021/06/27 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
Python实现数据的序列化操作详解
2022/07/07 Python