Friday, October 1, 2010

PNG replacement in Css

Problem: The browser does not display PNG transparency—rather than a background
showing through a semitransparent PNG, the transparency is shown as solid white.


Solution: For backgrounds, use the AlphaImageLoader filter as shown. Here’s the clean CSS:
.boxout {
background: url(an-image.png);
}
And here’s the override CSS for the IE style sheet:
.boxout {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
å(src='an-image.png',sizingMethod='scale');
background: none;
}
For individual images, either put up with old versions of Internet Explorer not displaying
them as intended, or create some additional content for Internet Explorer that can be
swapped out for the PNG image.
Here’s the HTML:
<img src="an-image.png" width="300" height="300" alt="An image"
å class="pngImage" />
<img src="shim.gif" width="300" height="300" alt="An image"
å class="IEImage" />

Here’s the clean CSS:
.IEImage {
display: none;
}
And here’s the override CSS for the IE style sheet:
.pngImage {
display: none;
}
.IEImage {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
å(src='an-image.png',sizingMethod='scale');
background: none;
}
Note that shim.gif should be a transparent GIF with no content.

No comments:

Post a Comment