请问如何实现png图片的背景在IE6下的透明效果？

blackpool 2008-06-02 11:25:48

请问如何实现png图片的背景在IE6下的透明效果？（IE7以下版本均会显示一个灰色背景。。。汗！）

小弟初学，在网上google了许多方法如下，但都没有调试成功，请问：

下面的代码到底应该放在html代码的哪个地方，其中“transparent.gif为1px*1px的透明gif图片”又是什么东东？

或者您有更好的方法实现IE6下png图片背景的透明请麻烦告知，谢谢！！

目前大部分浏览器对PNG的支持并不完善,IE虽然可以显示PNG图片，但如果PNG图片中含有透明部分，那么透明部分的显示就不正常了。

解决这个问题大致有以下方法(其原理都是通过AlphaImageLoader滤镜来解决)。

方法一:

<div style="filter:progidXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png);width:200px;height:50px"></div>

点评:这种方法虽然较好的解决了IE 5+的浏览器，但却得本来能正常显示透明PNG图片的FireFox无法正常显示!

方法二:

<script type="text/javascript">
// PNG纠正控件 1.0 For IE 5.5或更高.
// 作者:舜子

function isIE(){
if (navigator.appName!="Microsoft Internet Explorer" {return false}
return true
}

function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images
var LW=img.width
var LH=img.height
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "NG"
{
img.style.filter+="progidXImageTransform.Microsoft.AlphaImageLoader(src="+img.src+", sizingmethod=scale);"
img.src="/images/transparent.gif"//transparent.gif为1px*1px的透明gif图片
img.width=LW
img.height=LH
}
}
}
if (isIE()) {window.attachEvent("onload", correctPNG);}
</script>

点评:这种方法确实能解决这个问题，但是如果不是在本地调试，通常需要一段时间的转换!

方法三:

<div id="header">
<script type="text/javascript">
if (navigator.appName!="Microsoft Internet Explorer" {
document.write("<img src=\"/images/header.png\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />";
} else {
document.write("<img style=\"filter:progidXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;\" src=\"{$rootpath}/images/transparent.gif\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />";
}
</script>
<div>
点评:事实上网页中绝对需要使用透明PNG图片的地方并不多，所以如果你的网页中仅仅是一两处使用透明PNG图片，建议用这种方法。

如果浏览者禁用了js,方法二和三当然失去了作用。针对方法三，可以做一些完善:

<div id="header">
<div id="Index_header">图片简要说明,正常浏览本站请不要禁用js</div>
<div>

<script type="text/javascript">
if (navigator.appName!="Microsoft Internet Explorer") {
document.getElementById('logo').innerHTML="<img src=\"/images/header.png\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />"
} else {
document.getElementById('logo').innerHTML="<img style=\"filter:progidXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;\" src=\"/images/transparent.gif\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />"
}
</script>

...全文

977 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

lfywy 2008-06-03

打赏
举报

代码示例：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>alpha picture </title> 

<style type="text/css"> 

.leftAlpha{ 

width:250px; height:333px; 

float:left; 

background:#efefef; 

filter:alpha(opacity=50); /*IE*/ 

  -moz-opacity:0.5; /*MOZ , FF*/ 

  opacity:0.5; /*CSS3, FF1.5*/ 

} 

.rightAlpha{width:250px; height:333px; 

float:right; 

ackground:#efefef; 

filter:alpha(opacity=10); /*IE*/ 

  -moz-opacity:0.1; /*MOZ , FF*/ 

  opacity:0.1; /*CSS3, FF1.5*/ 

} 

#picture{ 

background:url(http://p.blog.csdn.net/images/p_blog_csdn_net/lfywy/400542/o_2008052714285782380.jpg) no-repeat; 

width:500px; height:333px; 

float:left; 

} 

</style> 

</head> 



<body> 

<div id="picture"> 

<div class="leftAlpha"> </div> 

<div class="rightAlpha"> </div> 

</div> 

</body> 

</html>