There are many places on the web where you can find information about using the IE AlphaImageLoader
filter to load and display a semi-transparent PNG file. As I'm sure
you are aware, IE does not by default support 24 bit PNG alpha transparency.
There is however a lesser known alternative to using a filter to render out such a
PNG file: VML. As many of you will know, VML is natively supported by Internet
Explorer and allows you to render a variety of shapes directly in the browser.
It is not supported by FireFox however which is planning native support for SVG come
version 1.5 (you can see it in action in the current beta). I'm not going to
go into the details of VML versus SVG,
but suffice to say that VML was effectively the precursor to SVG.
With VML you can render different shapes with different fills. These fills can
use an image as the source and this is where the PNG trick comes into play.
Using the following markup you can render a rectangle with an semi-transparent PNG
as the fill:
<vml:rect stroked="f" style="width: 100px; height: 100px;">
<vml:fill type="frame" aspect="atmost" src="SemiTransparent.png" />
</vml:rect>
There is a little more to it of course, you have to define the vml namespace in one
of the following two ways:
<html xmlns:vml="urn:schemas-microsoft-com:vml">
Or
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="vml"/>
And then apply the built in VML behaviour to all elements with the vml namespace (of
course it need not be vml, it could be XYZ if you wanted it to be that):
<style>
vml\:*
{
behavior:url(#default#vml);
}
</style>
The end result is something like this:
AlphaPngTransparencyUsingVML.htm
(1.88 KB)