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 uugly and this is really the last
Thing any web designer or Webmaster wocould 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
PNG with transparency blends in nicely with no problem
Internet Explorer 6Internet Explorer does not turn your transparency Transparent, thus leaving you with a big uugly white spot.
SolutionCreate a container to store your image. In this case I use a <div>.
Create your <div> inside your <body>, just like this.
<Body> <div class = "flower"> </div> </body>
Next, create a <style> if you dont have one. Make sure they are between your
Css
Inside.
<Style>
Body {background-color: #000}
Div. flower {background: url(flower-transparent.png) no-repeat; height: 100px; width: 100px}
</Style>
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 shoshould now give you a perfect blend like the picture below.
Download my working example.
<! -->
PS: 1. Judge function isie6 () {in IE version (){If (navigator. userAgent. indexOf ("MSIE")> 0 ){
// Whether the browser is Internet Explorer
If (navigator. userAgent. indexOf ("MSIE 6.0")> 0)
{
Return true;
}
}
Return false;
} 2. Set png Image transparency in js 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 ';
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
