在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跨浏览器的问题之后,我们可以利用它来实现更加复杂和更加绚丽的页面效果。
0
投稿
猜你喜欢
- 原理:建一个栈,每次碰到一个新标签,就与栈顶的标签配对,如果配对,栈顶的标签就出栈,如果不配对,这个新标签就进栈,最终,栈如果是空的,说明所
- 永远不要相信用户输入的内容具有适当的大小或者包含适当的字符。在使用其做出决策之前应该始终对用户输入进行验证。最佳的选择是创建一个
- asp上传的时候出现这种 错误:Server 对象 错误 'ASP 0177 800401f3'Server.CreateO
- 在 玉伯 的文章 《一道大题目,嘿嘿》 中有这样一段代码:[] == ![]也许很多同学迷惑:咦,这个如何转换呢?首先,我们了解下逻辑 NO
- 前段时间冷空气突袭的时候,据说郊区密云的雪积得挺厚,但北京城内除了飘了一点小雪粒,毫无动静。应该是气温过高所致,我在慈云寺桥附近拍下的照片可
- 在ASP与ASP.NET之间共享对话状态(1)ASP实现原来的ASP对话只能将对话数据保存在内存中。为了将对话数据保存到SQL Server
- 由于连续的字符(字母、符号、数字)在默认情况下是不换行的,可能会破坏整个界面布局。那如何解决这个问题呢?在 IE 和 Safari 1.3+
- 好了,下面我们看看如何在服务器上生成.m3u文件并下传到客户端的:<%dim choose,path,mydb,myset,
- 来自Six Revisions的一篇文章,作者对一些主流的浏览器进行了测试比较,测试主要针对以下几个方面进行:1.JavaScript执行速
- 最近参与了将一个Sybase数据库移植到Microsoft SQL Server 2000上的项目,我在这一项目上获得的经验,将对Sybas
- 在数据库应用的设计中,我们往往会需要获取某些表的记录总数,用于判断表的记录总数是否过大,是否需要备份数据等。我们通常的做法是:select
- asp压缩access数据库,具体asp代码见下: Class DatabaseTools &n
- 使用在Safari和WebKit中可用的CSS高级特性,你可以为你的网站和网络应用带来一个新的级别的令人兴奋的东西。WebKit是Safar
- 一、避免Firefox 背景图不显示的兼容问题,定义background 属性,先后顺序不能随意变动。background : backgr
- 任何一个交互过程的操作,对于用户来说都有学习成本,谁也不能保证所有人都可以准确无误地走完一个流程。交互设计师在设计时应该考虑适时地给用户相应
- 核心提示:本文针对mysql-noinstall版本,也就是解压缩版的安装配置应用做了个总结,这些操作都是平时很常用的操作。文章中不对mys
- 经常写一些联合查询,联合一多了,代码就成倍的增加,时间一长,连我自己也看不懂到底是什么意思了。做Oracle 的时候,就看到有个 WITH,
- 表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把
- 教育信息化时代,考试成绩也要求上网公布。一次我将考试成绩制作成一个HTML文件,如图1所示,领导审查的意见是“将成绩按名次排列”,可是所有的
- 关于段落<p></p>相信大家已经都在自己的工作中开始关注并应用了。因为那真的是非常简单的事,只要你愿意你随时都可以