After very long gape, posting new article.

GIFs, JPEGs, PNG images are playing vital role in web development. Like GIFs, the PNG is great for displaying small images with few colors, like logos and icons. PNGs support alpha transparency.



First of all, what is called as alpha transparency? GIF files are only
capable of displaying a pixel as either completely transparent or
completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255. Source – http://christopherschmitt.com/

Did PNG’s supports all browsers? No, in lower versions of IE don’t support PNGs alpha transparency feature.

Below hack code, will supports IE6. It was written with one of the image filters called “AlphaImageLoader”. AlphaImageLoader will helps you to display a PNG with alpha transparency in IE6.

You can deploy below filter within HTML itself.

In Head <head> Section:

<!–[if lte IE 6]> <style> .transparent { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}</style>
<![endif]–>

Inside Body <body>:

<div style=”display:inline-block; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’) “> <img src=”image.png” width=”128″ height=”128″ class=”transparent” /></div>

Example:

Before applying above code in IE6:

beforeapplying png alpha transparency ie6 fix



After applying above code in IE6:



afterapplying png alpha transparency ie6 fix