Transparent PNG background image for IE 6.0 Firefox Opera

PNG images play a very important role in web design. They can be used to produce practical and brilliant results, but their support for PNG images is not ideal, firefox and opera have better support for PNG, especially the Firefox browser. However, ie ignores PNG, making it difficult for designers to use PNG images at will.

Effect Preview

The alphaimageloader filter of ie5.5 + provides a path to PNG. If it is loaded in the PNG (Portable Network Graphics) format, the transparency of 0%-100% is also provided. We use this filter and hack to design a model for a translucent PNG background image.

< Div ID = "Wrap" >
< P > < A Href = "Http://www.jluvip.com" > < Strong > PNG translucent background image effect </ Strong > </ A > < BR /> : PNG images play a very important role in web design. The characteristics of PNG images can be used to produce beautiful results, but the support for PNG images is not ideal, firefox and opera have better support for PNG, especially the Firefox browser. However, ie ignores PNG, and designers cannot use PNG images at will. </ P >
< P > The alphaimageloader filter of ie5.5 + provides a path to PNG. If it is loaded in the PNG (Portable Network Graphics) format, the transparency of 0%-100% is also provided. We use this filter and hack to design a model for a translucent PNG background image. </ P >
< P > < A Class = "Test" Href = "Http://www.jluvip.com" > Here is a hyperlink Test </ A > </ P >
</ Div >

# Wrap {
Width : 460px ;
Margin : 20px auto 20px 80px ;
Text-align : Left ;
Height : 300px ;
Padding : 20px ;
Border : 1px # Eee solid ;
}
/* Not for IE 6.0 */
HTML> body # wrap { Background : URL (img/bgcanvas.png) Repeat ; }

/*For Internet Explorer 6.0*/
* Html # wrap{
Filter:Progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src = "img/bgcanvas.png ");
Background:None;
}

# Wrap { Color : # C00 ; Text-Decoration : None ; Position : Relative ; } /* Solve the Problem of link failure under IE */
# Wrap a: hover { Text-Decoration : Underline ; }

Tested, it is compatible with ie6.0 Firefox 1.5 opera 8.5. Because the alphaimageloader filter does not support ie5.0, ie5.0 does not achieve the desired effect. Basically, ie5.0 and PNG are not supported.
Note that the DIV object wrap must have a clear size.

Syntax:
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = benabled, sizingmethod = ssize, src = Surl)

Attribute:
Enabled: Optional. Boolean ). Set or retrieve whether the filter is activated. True | false
True: default value. Filter activation.
False: the filter is disabled.

Sizingmethod: Optional. String ). Sets or retrieves the display mode of the image of the object to which the filter applies within the boundary of the object container.
Crop: Cut the image to fit the object size.
Image: default value. Increase or decrease the size boundary of an object to fit the image size.
Scale: scale the image to adapt to the size boundary of the object.
SRC: required. String ). Specify the background image using an absolute or relative URL. If this parameter is ignored, the filter will not work.

Note:
Within the boundary of the object container, an image is displayed between the background and content of the object. You can also cut and change the size of the image. If the file is loaded in PNG (Portable Network Graphics) format, the transparency between 0% and 100% is also provided. The transparency of images in PNG (Portable Network Graphics) format does not affect your choice of text. That is to say, you can choose to display the content after the completely transparent area of images in PNG (Portable Network Graphics) format.