在IE6中用PNG图片实现半透明效果(2)
作者:dudo 来源:dudo博客 发布时间:2008-05-30 13:14:00
标签:png,图片,透明,ie
三、其它情况
但是上面都用PNG做背景的情况,有时候我们还会用PNG来做遮罩,比如下面这张Logo图片,
我们可以使用PNG遮罩来达到渐变效果:
那么我们可以使用下面的方法来实现
HTML代码段
<div>
<img src="logo.jpg" alt="图片说明" />
<span></span>
</div>
注意:这种写法完全是为了迎合Internet Explorer 6,<div>容器用来帮助内部元素定位,<span>用来覆盖在<img>标签的上面达到半透明效果。下面我们只需要设定一下它们的位置就好了:
div { position:relative;}
span {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='filter.png');
float:left;
width:200px;
height:100px;
position:absolute;
top:0;
left:0;
}
不过,在Firefox中并没有filter这个属性,因此我们需要单独为Firefox中定制一个样式:
div > span {
background:url(filter.png);
}
这样我们就可以使用遮罩来实现半透明效果了:
不过如果有太多的地方需要实现这样的遮罩效果的话,上面的处理方式还不是最好的,首先它有冗余的HTML标签,此外还使用了绝对定位和相对定位。如果我们把上面的代码进行封闭效果会更佳。这里我们可以使用下面这段JS代码进行封闭
<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
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
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
这段代码只在Internet Explorer 6中才会被运行。
下面我们可以像在Internet Explorer 7 和Firefox中一样写代码:
<div><imgsrc"filter.png"alt"图片说明"/></div>
CSS
div {
background:url(logo.jpg) no-repeat;
}
解决了PNG跨浏览器的问题之后,我们可以利用它来实现更加复杂和更加绚丽的页面效果。


猜你喜欢
- 1:在终端下:mysql -V。 以下是代码片段:[shengting@login ~]$ mysql -Vmysql Ver 14.7 D
- Pytorch凭借动态图机制,获得了广泛的使用,大有超越tensorflow的趋势,不过在工程应用上,TF仍然占据优势。有的时候我们会遇到这
- 目标在本章中,将学习利用calib3d模块在图像中创建一些3D效果基础在上一节相机校准中,了解了相机矩阵、失真系数等。给定图案图像,可以利用
- 装饰器是程序开发中经常会用到的一个功能,也是python语言开发的基础知识,如果能够在程序中合理的使用装饰器,不仅可以提高开发效率,而且可以
- 最近遇到SQL Server 2005 输入框不能输入中文,在网上查了N久,试验了十几次奏这个法子有用:“把你表中的自动编号列放到最后面”。
- MYSQL的profiling功能要在Mysql版本5.0.37以上才能使用。查看profile是否开启mysql> show var
- 直接给源代码了:$current_dir = 'E:/temp/';$dir = opendir($current_dir)
- 为什么我把自己机子上的数据库备份文件往另一台机子上还原不成功?可能是你在Restore的对话框中选项不正确。Restore 有三个选项,分别
- 首先我是用pycharm完成的,要确定命令行和界面里是同一个环境。如果不确定可以设置再add在新增加的环境里看现在是哪个环境,只要选择已有的
- 本文实例讲述了php实现用于计算执行时间的类。分享给大家供大家参考。具体如下:有了这个php类,计算函数或者一段代码的执行时间就简单了<
- 本文实例为大家分享了python实现定时发送邮件到指定邮箱的具体代码,供大家参考,具体内容如下整个链路:传感器采集端采集数据,边缘端上传数据
- 【摘 要】 我只是提供我几个我认为有助于提高写高性能的asp.net应用程序的技巧,本文提到的提高asp.net性能的技巧只是一个起步,更多
- Numpy数组转置很容易,两种写法np_array = np.array([[1, 2], [3, 4]]) np_array.transp
- 当你提交一个查询的时候,MySQL会分析它,看是否可以做一些优化使处理该查询的速度更快。这一部分将介绍查询优化器是如何工作的。如果你想知道M
- 前言此专栏为python与R语言对比学习的文章;以通俗易懂的小实验,带领大家深入浅出的理解两种语言的基本语法,并用以实际场景!感谢大家的关注
- Navicat数据存放位置和备份数据库路径设置navicat的数据库存放位置在什么地方?带着这样的疑问,我们去解决问题,navicat是默认
- 今天写一个在windows下批量修改文件名的python脚本,用到文件的遍历。用python进行文件遍历有多种方法,这里列举并说明一下。os
- 之前做的一些项目中涉及到feature map 可视化的问题,一个层中feature map的数量往往就是当前层out_channels的值
- 本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下任务描述:计时器任务要求:案例描述:设计一个实现倒计时功能的
- 下载python3.6.5安装包1. 上传安装包。打开终端,利用命令cd 进入文件所在文件夹里python@ubun