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 相关文章推荐
ajax处理php返回json数据的实例代码
Jan 24 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 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数组的维度
2013/06/10 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php实现的日历程序
2015/06/18 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP 中常量的知识整理
2017/04/14 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
javascript实现的DES加密示例
2013/10/30 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
基于python操作ES实例详解
2019/11/16 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
决心书标准格式
2014/03/11 职场文书
租房协议书
2014/04/10 职场文书
社区低保工作总结2015
2015/07/23 职场文书
高三化学教学反思
2016/02/22 职场文书
商业计划书范文
2019/04/24 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书