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 17 Javascript
javascript 变量作用域 代码分析
Jun 26 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
如何在php中正确的使用json
2013/08/06 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
React如何避免重渲染
2018/04/10 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
解决layui的input独占一行的问题
2019/09/10 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
linux下python使用sendmail发送邮件
2018/05/22 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python实现斗地主分牌洗牌
2020/06/22 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
贷款担保书范本
2015/09/22 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
Python基于百度AI实现抓取表情包
2021/06/27 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android