Unbounded application of PNG transparent background images

PNG images are an indispensable part of the website design. The biggest feature should be that PNG can be lossless compressed and transparent, which plays an important role in enhancing the color effect of website images.

But why are there no extensive use of GIF and jpg images in PNG images? This is due to Microsoft's IE browser (Firefox and opera have better support for PNG, currently, mainstream Internet Explorer 6 cannot be well supported ). However, Microsoft has also recently changed itself. The new IE7 can support PNG well. we can imagine that in the future, the importance of PNG images will be even more prominent in the online world.

However, when most people are still using IE6, how can we use PNG images perfectly in the world of IE6 (the most important thing about PNG images is the use of PNG transparent background images ). We should be glad we are happy! 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. However, ie5.0 does not support attributes. It is only totally desperate, but there are only a few desperate ones. We should be satisfied and satisfied.

Now we will use the hack and alphaimageloader filters to implement the PNG transparent background image under IE6. However, the use of the filter has certain performance problems, so try to use it as little as possible.

First, familiarize yourself with the filter 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.

Firefox, opera, IE7, and other browsers that fully support PNG transparent images, while IE6 cannot be well recognized. We can use this to define the PNG Image styles in Firefox, opera, IE7, and other browsers. As follows:

# PNG {Background: URL (absolute path/images/bg.png) Repeat ;}

For IE6, we define it through the filter method. We can define the filter in IE6 by only recognizing the underscore. As follows:

# PNG {_ filter: progid: DXImageTransform. microsoft. alphaimageloader (Enabled = 'true', sizinmethod = 'Scale', src = "absolute path/images/bg.png"); _ Background: none ;}

The final method is as follows:

# PNG {Background: URL (absolute path/images/bg.png) Repeat; _ filter: progid: DXImageTransform. microsoft. alphaimageloader (Enabled = 'true', sizingmethod = 'Scale', src = "absolute path/images/bg.png"); _ Background: none ;}

Note the following:

After alphaimageloader is used, the hyperlinks and buttons in the region will become invalid. Solution: directly set the relative positions of the links or buttons so that they can float above the filter area.

References:Http://support.microsoft.com/kb/294714/zh-cn