IE: Fix broken PNG-transparency when alpha-filter is applied
Normally when you apply filter: alpha(opacity=XX) to an element that includes a 24Bit-PNG image, the image's transparency turns from 8Bit into 1Bit and gets ugly. You can counter that effect if you also apply the image via filter - in this case the AlphaImageLoader-filter.
HTML
<div class="unfixed">Broken<br><code>background-image: url("path-to-png.png");<br>
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);</code></div>
<div class="fixed">Fixed<br> <code>filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path-to-png.png",sizingMethod="scale") progid:DXImageTransform.Microsoft.Alpha(Opacity=90);</code></div>
CSS
div {
width: 760px;
height: 60px;
margin: 20px;
padding: 520px 20px 20px 20px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.unfixed {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png");
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}
.fixed {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png");
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png",sizingMethod="scale") progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}
JavaScript
// original: http://jsfiddle.net/Schepp/8g9jG/