CSS solves the problem of opacity of the PNG Image background in IE6

The translucent effect sometimes adds a lot of color to the page, especially when Vista is prevalent, the translucent effect is more respected. Among the many image formats that can be used for Web browsing, only PNG and GIF formats can achieve translucent effect. However, the translucent Effect of GIF format is limited and will be distorted in a wide range, so currently, the most popular method is to use images in PNG format. Unfortunately, in Internet Explorer 6 and earlier versions, the PNG translucent effect is not supported (at least not directly ). Fortunately, Microsoft has other built-in functions in these browsers to help us implement this translucent effect.

Program code Body {Background: Black url(bg.jpg) No-repeat 0 0; text-align: center;} Div {width: 80%; margin: 0 auto; text-align: Left padding: 7px; Background-image: url(tran.png); Border: 3px solid # FFF ;}

2. Implementing Internet Explorer in Internet Explorer 6 provides a unique filter effect. It uses filter: progid: DXImageTransform. microsoft. alphaimageloader implementation:

Program code 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.
Feature: enabled: read/write. Boolean ). See enabled attributes. Sizingmethod: read/write. String ). See sizingmethod attributes. SRC: read/write. String ). See src attributes.
Note: An image is displayed between the background and content of the object within the boundary of the object container. 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.

Therefore, in Internet Explorer 6, we need to add the following words:

Program code * HTML Div {filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src = "tran.png"); Background: none ;}

Note: here we use the "*" CSS hack, which is unique to Internet Explorer 6. In the DOM structure of Ineternet Explorer 6, the default HTML parent node is *, in the standard DOM structure, HTML is the root node. Therefore, the above CSS rules are only known to Internet Explorer 6.
In this way, we have achieved translucent effects in Internet Explorer 6, 7, Firefox, opera and other most commonly used browsers.
3. In other cases, PNG is used as the background, and sometimes PNG is used as the mask. For example, in the logo image below, we can use the PNG mask to achieve the gradient effect: we can use the following method to implement the HTML code segment.

Program code <Div> <span> </div>

Note: This method is used to cater to Internet Explorer 6. The <div> container is used to help internal element locating, And the <span> container is used to overwrite the label to achieve translucent effect. Below we just need to set their positions:

Program code Div {position: relative;} span {filter: progid: DXImageTransform. microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src1_'filter.png '); float: Left; width: 200px; Height: 100px; position: absolute; top: 0; left: 0 ;}

However, the filter attribute is not available in Firefox, so we need to customize a style for Firefox separately:

Program code Div> span {Background: url(filter.png );}

In this way, we can use a mask to achieve a translucent effect.
However, if there are too many places to implement such a mask effect, the above processing method is not the best. First, it has redundant HTML tags. In addition, it also uses absolute and relative positioning. If weCodeThe blocking effect is better. Here, we can use the following JavaScript code for blocking.

Program code <! -- [If lt IE 7]> <script language = "JavaScript"> function correctpng () // correctly handle PNG transparency in win IE 5.5 & 6. {var arversion = navigator. appversion. split ("MSIE") var version = parsefloat (arversion [1]) if (version >=5.5) & (document. body. filters) {for (VAR I = 0; I <document. images. length; I ++) {var IMG = document. images [I] var imgname = IMG. SRC. touppercase () if (imgname. substring (Imgname. Length-3, imgname. Length) = "PNG") {var imgid = (IMG. ID )? "Id = '" + IMG. ID + "'": "" Var imgclass = (IMG. classname )? "Class = '" + IMG. classname + "'": "" Var imgtitle = (IMG. Title )? "Title = '" + IMG. title + "'": "Title ='" + IMG. alt + "'" Var imgstyle = "display: inline-block;" + img.style.css text if (IMG. align = "Left") imgstyle = "float: Left;" + imgstyle if (IMG. align = "right") imgstyle = "float: right;" + imgstyle if (IMG. parentelement. href) imgstyle = "cursor: hand;" + imgstyle var strnewhtml = "<span" + imgid + imgclass + imgtitle + "style = \" "+" width: "+ IMG. width + "PX; Height:" + IMG. height + "PX;" + imgstyle + ";" + "filter: progid: DXImageTransform. microsoft. alphaimageloader "+" (src = \ '"+ IMG. SRC + "\ ', sizingmethod = 'Scale'); \"> </span> "IMG. outerhtml = strnewhtml I = I-1 }}} window. attachevent ("onLoad", correctpng); </SCRIPT> <! [Endif] -->

This code is only run in Internet Explorer 6. Below we can write code like in Internet Explorer 7 and Firefox:

Program code <Div> </div> Program code Div {Background: url(logo.jpg) No-Repeat ;}

After solving the problem of PNG cross-browser, we can use it to achieve more complex and beautiful page effects.