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函数、方法、对象代码
Oct 29 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
js继承实现方法详解
Dec 16 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
vue实现多级菜单效果
Oct 19 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
javascript 函数调用规则
2009/08/26 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
2015年学校图书室工作总结
2015/05/19 职场文书
小学班主任心得体会
2016/01/07 职场文书
志愿者工作心得体会
2016/01/15 职场文书
python爬虫--selenium模块
2021/03/31 Python
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
SpringBoot 集成Redis 过程
2021/06/02 Redis