Several transparent methods of png-24 in IE6

Because of the game in the page background and decorative characters in the design of the pursuit of painting and game style to match, which gives the front page production staff to bring a lot of trouble, a page of the production of the main time and energy to spend on compatible IE6, and IE6 because incompatible png-24 picture has been despised by developers.

Because the market determines the value of the existence of the page, so the IE6 still must be compatible.

Here are a few common workarounds:

Dd_belatedpng.js method

Introduction of JS File

<!--[if IE 6]>
<script type= "Text/javascript" src= "Js/dd_belatedpng.js" ></script>
<script>
Dd_belatedpng.fix ('. PngFix ');
</script>
<! [endif]-->

The class callout is then made for elements that need to be IE6 under transparency.

The feature is to solve the png-24 transparency problem to a large extent, but there are several problems more obvious.

1. js files need to be introduced.

2. He will dynamically wrap a layer of CSS on the png-24 image as a position:relative element, so that the original Position:absolute element disappears or other unexpected bugs appear.

Workaround: Add another layer of position:relative to the png-24 image, or do not use absolute positioning or use other methods.

IE Filter method

After the JS method fails, you can use this method to make the picture transparent.

Background:url (/images/game_box.png) 0 0 no-repeat;_background:none;_filter:progid:d XImageTransform.Microsoft.AlphaImageLoader (src= '/images/game_box.png ', sizingmethod= ' crop ');

Of course the disadvantage of this approach:

1. Filter performance problems have always been a bottleneck in IE browser. 2. Background-position cannot be implemented.

Sizingmethod

:

Options are available. String. Sets or retrieves how the picture of the object that the filter acts on is displayed within the bounds of the object container. Crop : Cut the picture to fit the object's size. 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 object's dimension boundaries.

Picture substitution method

In the case where the picture background is not required to scroll, you can use the png-24 image in the advanced browser, then use the tool to crawl the area that needs to be transparent, then directly using the image.

The advantage of this method is that there is no compatibility problem, and in order to ensure that the picture size can be displayed normally, the disadvantage is that the operation is more complex, but also make the color information of the picture caused partial loss.

Browser Differentiation method

Another way is to use JS to judge is IE6 browse, add a different picture. Use different images depending on the browser.

This method is used, the user market is more mature product or interface, regardless of the low-end IE6 browser users, but also to ensure that the browser can display normally, but the quality of the picture slightly almost.

The above several methods in the RO official website has the profound embodiment.

Several transparent methods of png-24 in IE6