Display of transparent PNG images in IE6

Source: Internet
Author: User

PNG (Portable Network Graphics) is a common format recommended by W3C for web images. However, the alpha channel of PNG is not opened for IE6 or earlier (which is supported by IE7, the effect of the transparent PNG image is reduced. Normally transparent PNG images are displayed in Firefox and opera, and a gray background color is displayed in IE...

The opacity is like this:

 

One solution is to add a filter to the transparent PNG Image:

Run code box
<Div style = "width: 100%; filter: progid: DXImageTransform. microsoft. alphaimageloader (src = '/files/beyondpic/2006-12/1/publics.png', sizingmethod = 'image')> </div>
[Ctrl + A select all tips: you can modify some code and then press run]

Or use CSS to write the style in the CSS file, so you don't need to write such a long code for every image.

PS: The following ie5.0 does not support the alphaimageloader filter. Therefore, the transparent PNG effect cannot be displayed under ie5.0. However, I'm afraid no one is using ie5.0.

 

 

Alphaimageloader 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.

Note:
Within the boundary of an object container, an image is displayed between the background and content of the object, and you can cut and resize 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.

Reprinted from the flash Alliance http://www.88it.net/Get/css/2006-12-1/153845705.htm

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.