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