Several transparent methods of png-24 in ie6_html/css_WEB-ITnose

Since game official websites pursue beautiful design in page backgrounds and decorative characters and want to match the game style, this brings a lot of trouble to front-end page producers. The production of one page Most of the time and effort is spent on compatibility with ie6, which has always been despised by developers because it is not compatible with png-24 images.

Since the market determines the value of the page, IE6 must still be compatible.

The following introduces several commonly used solutions:

dd_belatedpng.js method

Introducing js files

Then mark the elements that need to be transparent under ie6 with classes.

The feature is that it can solve the transparency problem of png-24 to a large extent, but there are also several obvious problems.

1. js files need to be imported.

2. It will dynamically wrap a layer of CSS elements with position:relative; on the png-24 image, causing the original position:absolute; elements to disappear or other unexpected bugs to appear.

Solution: Add another layer of position:relative; dom element 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 image transparent.

background:url(/images/game_box.png) 0 0 no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/game_box.png' ,sizingMethod='crop');

Of course, the disadvantages of this method are:

1. The performance of filters has always been a bottleneck of IE browsers.

2. background-position cannot be implemented.

Image replacement method

If the image background is not required to scroll, you can use png-24 images in advanced browsers, and then use the screenshot tool to capture the area that needs to be transparent, and then Use the screenshot directly.

The advantage of this method is that there is no compatibility problem, and it can be displayed normally while ensuring the image size. The disadvantage is that the operation is more complicated, and the screenshot will also cause part of the color information of the image to be lost.

Browser differentiation method

Another way is to use js to determine if it is ie6 and add different pictures. Use different images depending on the browser.

This method is used for products or interfaces with relatively mature user markets. It does not consider users of low-end IE6 browsers, but it is also guaranteed to display normally in the browser, but the quality of the pictures is slightly worse.

The above methods are deeply reflected in the ro official website.