Cross Browser PNG Transparency Fix for IE

MS SAMEER (CMA*CA*CMDM*ast FUND MANAGER*LEGAL ADVISOR)   (14938 Points)

19 September 2010  

If you browse to a Web page that contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may appear to be gray rather than transparent.

Here is a better use of the AlphaImageLoader fix that would avoid the use of conditional statements for use with cross browser support (as well as cross version for IE 5.5 and up).

<img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="/images/photo.png" widtth="174px" border="0">


Important : You have to ensure there are no spaces between the span and image tags. The widtth (and height if it is used) declarations must be the same in both the span and image tags. The size adjusting attributes must be present in both tags.


AlphaImageLoader Filter

 

Displays an image within the boundaries of the object and between the object background and content, with options to clip or resize the image. When loading a Portable Network Graphics (PNG) image, tranparency from zero to 100 percent is supported.

Syntax

 

HTML

<ELEMENT STYLE=
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)"
 ... >

Internet Explorer 5.5 or later

Scripting

object.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)"