在IE6中用PNG图片实现半透明效果(2)
作者:dudo 来源:dudo博客 时间:2008-05-30 13:14:00
三、其它情况
但是上面都用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跨浏览器的问题之后,我们可以利用它来实现更加复杂和更加绚丽的页面效果。
标签:png,图片,透明,ie
0
投稿
猜你喜欢
python numpy 常用随机数的产生方法的实现
2021-06-14 22:44:05
Python面向对象实现一个对象调用另一个对象操作示例
2023-08-30 22:54:35
SQL语句练习实例之三——平均销售等待时间
2011-10-24 20:11:47
Python爬虫利用多线程爬取 LOL 高清壁纸
2023-02-10 15:07:25
vue项目中如何调用多个不同的ip接口
2024-04-10 10:32:37
一个统计当前在线用户的解决方案
2007-10-13 19:27:00
Python Pyecharts绘制箱线图详解
2021-03-31 05:57:05
C#调用python.exe使用arcpy方式
2021-03-30 05:41:13
微信跳一跳python代码实现
2021-09-16 05:35:09
Golang 使用http Client下载文件的实现方法
2023-07-21 07:32:23
Python的Tornado Web框架深入解析
2021-11-28 03:14:51
python实现简单通讯录管理系统
2021-05-02 10:41:23
Python Socketserver实现FTP文件上传下载代码实例
2022-10-10 11:03:04
Bootstrap实现提示框和弹出框效果
2023-07-02 05:25:33
python中使用while循环的实例
2022-12-25 00:23:57
JS实现json数组排序操作实例分析
2024-04-18 09:44:25
ORACLE时间函数(SYSDATE)深入理解
2024-01-18 05:15:14
python自动翻译实现方法
2022-01-01 08:03:31
MySQL索引知识的一些小妙招总结
2024-01-13 18:16:39
windows下Python实现将pdf文件转化为png格式图片的方法
2022-03-22 08:55:51