Use of PNG transparent images on Web pages (ie6+ filter)

The lossless compression and translucency features of the PNG (Portable Network Graphics) format play an important role in reducing web page volume, but since IE6 does not support PNG, it has not been widely used.

Although IE7 already support PNG, but the current IE6 still mainstream, how to let IE6 also use PNG? Online has related to the introduction, below I also try to do a brief introduction, hope in the expression can more easy to understand ...

Ie5.5+ 's AlphaImageLoader filter provides good support for PNG, although IE5.0 cannot support it, but it is a very, very small part that will be smaller in the future, so we don't consider it.

Syntax for filters:

    Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=benabled, Sizingmethod=ssize, Src=surl)

properties:

Enabled: Optional, Boolean value (Boolean). Sets or retrieves whether the filter is active. true | False

True: The default value, filter activation.

False: Filter is forbidden.

Sizingmethod: Available options.
Crop: Cuts the picture to fit the object's dimensions.

Image: The default value. Increase or decrease the size boundaries of an object to fit the dimensions of the picture.

Scale: Scales the picture to fit the size bounds of the object.

src: Required option. String. Specifies the background image using an absolute or relative URL address. If this parameter is omitted, the filter will not function.

How to use:

Html>body #png {background:url (images/bg.png) no- /* * *HTML #png {filter: Progid:DXImageTransform.Microsoft.AlphaImageLoader (Enabled=true, sizingmethod=scale,src="  images/bg.png"/** *

 

Firefox,opera supports PNG, is recognized with the ">" sub- selector, and IE does not recognize this selector (including IE7).

Although IE7 supports PNG, it is convenient to use a filter, using the wildcard character "*", which only IE can recognize

However, using this filter, the hyperlink button in the area will be invalidated, the workaround? Use "position" to make them float on top

Only IE6 have this bug, so the latest way to do so

#png {Background:url (.. /images/png32.png) no-repeat;_filter:progid:dximagetransform.microsoft.alphaimageloader (Enabled=  True, sizingmethod=scale,src="images/png32.png"); _background:none}