How to Make PNG background images transparent under ie6

 

I recently found that the PNG image cannot be normally displayed under IE6, which makes me very worried. Using the transparent or translucent features of PNG images, you can make very beautiful webpages. In Firefox and Opera, PNG support is very good, however, IE ignores the existence of PNG images. Although IE7 supports IE6, it still does not work. I checked some materials and basically solved this problem. I will share with you here.

Although there is a JS program that enables IE6 to support PNG transparent backgrounds, it is not very convenient, and it affects the Code's conciseness. It is better to use CSS to implement it. Use the AlphaImageLoader filter of IE5.5 +.

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 the object container, an image is displayed between the background and content of the object. You can also cut and change the size of 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.

After learning about the above content, you can write a simple CSS code for implementation:

. News {width: 364px; height: 212px; filter: progid: DXImageTransform. microsoft. alphaImageLoader (enabled = 'true', sizingMethod = 'Scale', src = "/templets/images/news_bg.png"); background: none ;}

This simple CSS code can normally display the PNG transparent background in IE, but will not show the background in FF. cause: the AlphaImageLoader filter can only be supported by IE, FF does not support this filter.

Some beginners may add the following paragraph in the Code: background-image: url (/templets/images/news_bg.png );

Although adding such a piece of code can solve the FF problem, it is a problem with IE: The new background will overwrite the background of the filter, resulting in invalid filter display, at this time, we will use the difference between IE and FF in CSS reading:

We can separate IE6 from IE7 and FF. Because IE6 can recognize the "_" number before the style, but IE7 and FF cannot, we should first write IE7 and FF to recognize other CSS:

. News1 {width: 364px; height: 212px; background: url (/templets/images/news_bg.png) top no-repeat ;}

Then add the AlphaImageLoader filter code after the code and use the prefix "_". Therefore, the complete code is as follows:

. News1 {clear: both; float: left; width: 364px; height: 212px; margin-bottom: 16px; background: url (/templets/images/news_bg.png) top no-repeat; _ filter: progid: DXImageTransform. microsoft. alphaImageLoader (enabled = 'true', sizingMethod = 'Scale', src = "/templets/images/news_bg.png"); _ background: none ;}

This effect can be achieved without increasing the amount of code.

However, it should be noted that the AlphaImageLoader filter will invalidate links and buttons in the region. The solution is to use relative positioning for links or buttons, or add: position: relative; this Code will make it relatively floating.

In the end, AlphaImageLoader cannot set repeated backgrounds. Therefore, it has a high precision requirement on image cropping.