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

Source: Internet
Author: User

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}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.