Tom Lauck’s Deseloper.org

Transparent PNGs in Every Browser

author:

If you don’t want to use JavaScript or create a 24-bit and an 8-bit PNG in order to accommodate all browsers (mainly IE 5.5 – 6), you can use Microsoft’s handy Dx Attribute as filter in your CSS.

The drawback is that you have to create a separate style sheet for browsers greater than IE 5.5 and less than IE 7.

For example, if you need to use a transparency for a site’s logo, you may do something like:

<style type="text/css">
.logo
{
	background: url(img/button.png) no-repeat center center;
	height: 126px;
	width: 190px;
}

.logo a
{
	display: block;
	overflow: hidden;
	/*setting a width breaks link area for PC IE 5*/ ;   width/**/: 190px; /*\*//*/   width: 190px;   /**/ ;
	height: 126px;
	text-indent: -90000px;
}
.logo a:hover
{
	background-color: transparent;
}
</style>

<!--[if gte IE 5.5]>< ![if lt IE 7]>
<style type="text/css">
.logo
{
	background-image: url();
}
.logo a
{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'img/button.png\',sizingMethod=\'image\');
}
</style>
< ![endif]>< ![endif]-->

MSDN has a library of some of the possibilities (not new by any means), but helpful nonetheless.

2 Responses

date: June 27th, 2007

There was a good article about PNG’s on Digital Web magazine a few weeks ago: http://www.digital-web.com/articles/web_standards_creativity_png/

spoken by: ed.

date: January 23rd, 2012

You’re truly a good webmaster. The website loading speed is amazing. It sort of feels that you’re doing any distinctive trick. Furthermore, The contents are masterpiece. you’ve performed a wonderful process on this subject!

spoken by: Happy Weekend

Leave a Reply

Jun 20 2007