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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
python序列类型种类详解
2020/02/26 Python
出生公证委托书
2014/04/03 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
2019大学生实习报告
2019/06/21 职场文书
php png失真的原因及解决办法
2021/11/17 PHP
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS