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中Eval函数的使用说明
Oct 11 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
vue鼠标悬停事件实例详解
Apr 01 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 session 会话处理函数
2016/06/06 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP实现的日历功能示例
2018/09/01 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
JavaScript中标识符提升问题
2015/06/11 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
详解用python写一个抽奖程序
2019/05/10 Python
OpenCV 模板匹配
2019/07/10 Python
QML使用Python的函数过程解析
2019/09/26 Python
wxPython实现列表增删改查功能
2019/11/19 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
校园安全广播稿范文
2014/09/25 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
Nginx四层负载均衡的配置指南
2021/06/11 Servers
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL