热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

一、在IE6中使用PNG背景 IE6本身并不认识PNG图片的透明特性,虽然有让IE6支持PNG透明背景的JS程序: 代码如下:functi
一、在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{
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 = "+ " " + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\">
"
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文件,即可。

推荐阅读
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]
  • 在使用Firefox浏览器打开本地HTML文件时,尝试调用Canvas的drawImage方法可能会遇到NS_ERROR_NOT_AVAILABLE错误。本文探讨了这一问题的原因及解决方案。 ... [详细]
  • 利用CSS3和React实现数字滚动动画组件
    在前端开发中,数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件,包括组件的代码实现和样式设计。如果您对HTML版本感兴趣,欢迎留言获取。 ... [详细]
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 程序员妻子吐槽:丈夫北漂8年终薪3万,存款情况令人意外
    一位程序员的妻子在网上分享了她丈夫在北京工作八年的经历,月薪仅3万元,存款情况却出乎意料。本文探讨了高学历人才在大城市的职场现状及生活压力。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • 本文介绍如何在应用程序中使用文本输入框创建密码输入框,并通过设置掩码来隐藏用户输入的内容。我们将详细解释代码实现,并提供专业的补充说明。 ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 本文详细介绍了如何通过命令行启动MySQL服务,包括打开命令提示符窗口、进入MySQL的bin目录、输入正确的连接命令以及注意事项。文中还提供了更多相关命令的资源链接。 ... [详细]
  • 本文详细探讨了JavaScript中四种获取CSS样式的不同方法:style、currentStyle、getComputedStyle和getBoundingClientRect。每种方法的适用场景及其兼容性问题,并提供了解决方案。 ... [详细]
  • Microsoft即将发布WPF/E的CTP(Community Technology Preview)和SDK,标志着RIA(Rich Internet Application)技术的新里程碑。更多详情及下载链接请参见MSDN官方页面。 ... [详细]
  • 本文介绍了如何利用Selenium和Python通过执行JavaScript代码来控制网页中的滚动条,包括垂直和水平滚动条的控制,以及特定元素的聚焦技术。 ... [详细]
  • 本文详细介绍了在Ubuntu 7.10操作系统上安装多种常用软件的方法,包括RAR压缩工具、即时通讯软件Pidgin、办公软件永中Office 2007试用版、多线程下载软件MultiGet及d4x、FTP客户端gFTP与FireFTP插件,以及P2P下载工具aMule。每部分都提供了具体的安装步骤和配置方法。 ... [详细]
author-avatar
手机用户2702935720
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有