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.

1. Let's take a look at the implementation of translucent effects in modern browsers in general situations.
First, you must have a translucent PNG image. This is easy to create. Create a new file in Photoshop, add a new layer in the file to fill in white, adjust the transparency, and delete the background, save it as PNG. You can also download this PNG file. The job we need to do is simple: you just need to specify this PNG image as a <div> background. For example, you can use the following CSS rules:

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. Implementation in Internet Explorer 6
Internet Explorer provides a unique filter effect, which is implemented through filter: progid: DXImageTransform. Microsoft. AlphaImageLoader. Now we know about this attribute:

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.

Features:
Enabled: read/write. Boolean ). See enabled attributes.
SizingMethod: read/write. String ). See sizingMethod attributes.
Src: read/write. String ). See src attributes.

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.

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.

Iii. Other cases
However, the above uses PNG as the background, and sometimes we use PNG as the mask, such as the following Logo image,

We can use PNG masks to achieve gradient effects:

We can use the following method to implement
HTML code segment

Program code <div>

<Span> </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:

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:

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. It would be better if we closed the above Code. 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>
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.