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在事件监听方面的兼容性小结
Apr 07 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
javascript流程控制语句集合
Sep 18 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
深入详解JS函数的柯里化
Jun 09 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
数据库相关问题
2006/10/09 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python lxml中etree的简单应用
2019/05/10 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python连接mongodb集群方法详解
2020/02/13 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
python实现手势识别的示例(入门)
2020/04/15 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
语文教育专业应届生求职信
2013/11/23 职场文书
实习求职信
2013/12/01 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
MySQL RC事务隔离的实现
2022/03/31 MySQL
教你如何用cmd快速登录服务器
2022/06/10 Servers