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.

Tags: AlphaImageLoader, CSS, CSS Transparency, CSS Walkthrough, PNG
Posted in CSS | 1 Response » | View blog reactions