Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to solve the problem of transparency of PNG pictures under IE6". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The transparency of PNG pictures under IE6 is a clich é. It can only be blamed for the tricky IE6. Haha, here the editor summarizes several solutions and recommends them to you.

1. Filter

Filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled, sizingMethod=sSize, src=sURL)

Attributes:

Enabled: optional. Boolean value (Boolean). Sets or retrieves whether the filter is active. True | false

True: default value. Filter activated.

False: filters are prohibited.

SizingMethod: optional. String (String). Sets or retrieves how the picture of the object affected by the filter is displayed within the boundary of the object container.

Crop: cut the picture to fit the object size.

Image: default value. Increase or decrease the size boundary of the object to fit the size of the picture.

Scale: scales the picture to fit the size boundary of the object.

Meaning represented by each attribute value: http://images.cnblogs.com/cnblogs_com/rainman/139529/o_ie6_png_filter.png

Src: required. String (String). Specify the background image using an absolute or relative url address. If you omit this parameter, the filter will not work.

Example

The code is as follows:

.png {

Background: url (absolute path / images/bg.png) repeat

_ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled='true', sizingMethod='scale', src= "absolute path / images/bg.png")

_ background:none

}

Summary

The background cannot be tiled.

The background picture cannot be located, that is, the background-position attribute cannot be used, so it is not convenient to make CSS Sprite.

At the same time, there are also minor performance problems, when the number of times in the page is not many, this method is still feasible.

The src attribute in this filter is best to take the absolute path. If you take the relative path, it must be relative to the current web page path, rather than the "path relative to css" that we are used to.

The AlphaImageLoader filter will invalidate the links and buttons in this area, and the solution is to add a code such as: position: relative; to the link or button to make it float relatively.

For the filter to work, you should set the width and height values for the container.

Can only be used as a background, for the form of PNG images need to be processed in disguise.

SizingMethod='scale', and its Qixi Festival, ah, stretch the picture to simulate tiling.

2 、 iepngfix.htc

Web site: http://www.twinhelix.com/css/iepngfix/

The implementation principle is also a filter, which encapsulates these operations into an .htc file, which is more convenient to use.

Demo: http://www.twinhelix.com/css/iepngfix/demo/

3 、 DD_belatedPNG

This js plug-in uses Microsoft's VML language to draw, while most other js plug-ins that solve PNG problems use AlphaImageLoader filters.

It supports backgrond-position and background-repeat. This is not available in other js plug-ins. DD_belatedPNG also supports a:hover attributes, as well as tags.

Web site: http://www.dillerdesign.com/experiment/DD_belatedPNG/

Demo: http://www.ediyang.com/demo/DD_Png/

This is the end of the content of "how to solve the problem of transparency of PNG pictures under IE6". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.