在IE6中使用背景透明的PNG图片

最新推荐文章于 2024-11-03 00:32:02 发布

guo_rui22

最新推荐文章于 2024-11-03 00:32:02 发布

阅读量852

点赞数

分类专栏： 5、Web开发文章标签： ie internet mozilla firefox blend div

5、Web开发专栏收录该内容

69 篇文章 0 订阅

订阅专栏

Directly inserting images in PNG format with transparency will leave you with a white spot when display in Internet Explorer. It makes your image looks ugly and this is really the last thing any web designer or webmaster would want on their website. Here’s a solution on how to solve this white spot and let the PNG transparency recovers.

Let’s take a look at the difference of PNG images (with transparency) on both major browsers: Mozilla Firefox and Internet Explorer 6

Mozilla Firefox

PNG with transparency blends in nicely with no problem

PNG image in Mozilla Firefox

Internet Explorer 6

Internet Explorer does not turn your transparency transparent, thus leaving you with a big ugly white spot.

PNG image in Internet Explorer

Solution

Create a container to store your image. In this case I use a <div>.
Create your <div> inside your <body>, just like this.

Next, create a <style> if you dont have one. Make sure they are between your <head> </head>. Put the following css inside.

The CSS codes above displays your PNG image in a <div>. Works fine for Mozilla Firefox, but not for Internet Explorer. To get it working cross browser, create another set of css just for Internet Explorer right below your <style> </style>. Insert the following codes.

<!–[if gte IE 5]>
<style type="text/css">
div.flower {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);
}
</style>
<![endif]–>

Your IE should now give you a perfect blend like the picture below.

PNG image in Internet Explorer

Download my working example.

PS:

1、IE版本判断

function isIE6(){

if(navigator.userAgent.indexOf("MSIE")>0) {
//是否是IE浏览器

if(navigator.userAgent.indexOf("MSIE 6.0")>0)
{
return true;
}
}
return false;

}

2、在js中设置png图片透明

if(isIE6()){
div1.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = crop;)";
div1.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = '../aws_skins/_def51/img/nav_first_2.png';
}