PNG背景在不同浏览器下的应用

 更新时间:2009年06月22日 00:16:29   作者:  
论坛中kayeun在我的版面发了一个问题,关于PNG透明背景在FIREFOX浏览器下显示异常。 这里谈一下不同浏览器内,如何应用PNG图片作背景。
一、在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文件,即可。

相关文章

  • js获取页面及个元素高度、宽度的代码

    js获取页面及个元素高度、宽度的代码

    下面小编就为大家带来一篇js获取页面及个元素高度、宽度的代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04
  • Java @Schema和@ApiModel等注解的联系浅析

    Java @Schema和@ApiModel等注解的联系浅析

    这篇文章主要给大家介绍了关于Java @Schema和@ApiModel等注解的联系的相关资料,我在看公司之前的文档,发现了@schema注解,不太了解,所以查询了一些资料,把我的见解记录下,需要的朋友可以参考下
    2023-08-08
  • TypeScript模块与命名空间的关系和使用方法

    TypeScript模块与命名空间的关系和使用方法

    在TypeScript中就像在EC5中一样,任何包含顶级import或export的文件都被认为是一个模块,下面这篇文章主要给大家介绍了关于如何在TypeScript使用模块与命名空间以及注意事项的相关资料,需要的朋友可以参考下
    2023-03-03
  • 使用原生JS实现一个日期选择器(DatePicker)组件

    使用原生JS实现一个日期选择器(DatePicker)组件

    这篇文章主要为大家介绍了如何通过原生HTML/CSS/JavaScript完成一个日期选择器(datepicker)组件,一个纯手搓的组件的开发,有需要的可以了解下
    2025-01-01
  • JavaScript如何读取本地excel文件、txt文件的内容

    JavaScript如何读取本地excel文件、txt文件的内容

    JavaScript是一种脚本语言,广泛应用于前端开发,这篇文章主要给大家介绍了关于JavaScript如何读取本地excel文件、txt文件的内容,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 基于JavaScript实现图片剪切效果

    基于JavaScript实现图片剪切效果

    这篇文章主要介绍了用JavaScript实现图片剪切效果,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • JavaScript中判断函数、变量是否存在

    JavaScript中判断函数、变量是否存在

    这篇文章主要介绍了JavaScript中判断函数、变量是否存在,本文给出了多个判断函数是否存在的方法,并分别给出代码实例,需要的朋友可以参考下
    2015-06-06
  • js使用正则表达式对身份证号的判断

    js使用正则表达式对身份证号的判断

    这篇文章主要给大家介绍了关于js使用正则表达式对身份证号的判断的相关资料,在用户注册页面有些需求要求的比较严格,需要对身份证验证是否合法,通过此功能严格此系统软件,从而过滤到很多,需要的朋友可以参考下
    2023-08-08
  • 基于BootStrap的文本编辑器组件Summernote

    基于BootStrap的文本编辑器组件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。这篇文章主要介绍了基于BootStrap的文本编辑器组件Summernote的相关资料,需要的朋友可以参考下
    2017-10-10
  • JavaScript学习笔记之函数记忆

    JavaScript学习笔记之函数记忆

    这篇文章主要介绍了JavaScript学习笔记之函数记忆,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论