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 Konami Code 实现代码
Jul 29 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
原生JS实现分页
Apr 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
php使用反射插入对象示例分享
2014/03/11 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
解密效果
2006/06/23 Javascript
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
销售文员岗位职责
2013/11/29 职场文书
村级换届选举方案
2014/05/10 职场文书
新法人代表任命书
2014/06/06 职场文书
六查六看六改心得体会
2014/10/14 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
无线电知识基础入门篇
2022/02/18 无线电
vue选项卡切换的实现案例
2022/04/11 Vue.js