The summary of various methods of PNG transparency under IE (1/2)

The IE family has only 9 versions to support this attribute;

Having children's shoes may not be very clear to the RGBA environment, but must be familiar with the opacity attribute. Opacity implements the alpha channel of the element, such as opacity:0.5, which represents 50% transparency, but opacity not only implements the transparency of the element, but also includes the element's child elements, such as

The code is as follows	Copy Code
1.<div style= "background: #000; opacity:0.5" > I am Internal text </div>

The entire node tree will be displayed as a transparent grayscale of 50%, and RGBA can directly represent color attributes and transparency, such as

1.<div style= "Background:rgba (0,0,0,0.5);" > I am internal text </div>
The first three parameters are RGB representations of colors, such as 0,0,0, the last parameter is Alpha, and opacity have the same meaning, but this time the setting is to make the background color of <div> into 50% transparent grayscale, internal nodes and content is still opaque.

The browser that supports this property can be used directly:

The code is as follows	Copy Code
. class{Background:rgba (0,0,0,0.75); The hack for ie6-8 are:

. class{filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= #BF000000, endcolorstr= #BF000000);}
Use IE's own filter filter. IE does not support a lot of standards, but it also provides a lot of interesting features, such as the filter filter, expression in-line expressions and so on. Related parameters I will not explain, check yourself. Tip Two points:

The values of 1.startColorstr and ENDCOLORSTR are composed of two parts: the first two digits are alpha, the latter six are the color values, the hexadecimal notation, and the x=a*255 (where x is the 16 value of the expression, and a is the alpha value such as 0.5);
2. Because the ie5+ are supported by filter, you can write this:

The code is as follows	Copy Code
<!--[if IE 8]> <style> . Class{-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= #BF000000, endcolorstr= #BF000000)";} </style> <! [endif]-->

If you write in CSS, because ie9+ supports both filter and RGBA, you will see the effect of superposition.

②png transparency Support, currently only IE6 cannot be implemented.

This is the old problem of IE6, online there are many related solutions, summed up there are three kinds:

1. Use HTC File Repair (find related articles by yourself);
2.js repair;
3.css hack.

Here is the main next CSS hack method. Through filter we can indirectly let IE6 support PNG alpha values (Note: This method is suitable for PNG as a background image of the hack), such as a set of elements for a background image:

The code is as follows	Copy Code
1..class{background:url (Images/bg.png)}

Then the corresponding hack:

The code is as follows	Copy Code
. class{ Background:url (images/bg.png); /*IE6 Clear Background Map * * _background:none; /* The PNG picture loaded with filter has the Alpha attribute */6. _filter:progid:dximagetransform.microsoft.alphaimageloader (Enabled=true, Sizingmethod=scale, src= "misc/images/ Icon_circle.png ")}

Filter related properties and shortcomings (performance and can not be tiled, etc.) here, need to note that the corresponding path, although the same is written in CSS, but the filter's operating environment is relative to the current document, not the current CSS, So the URL relative path in the CSS and the path in filter are very likely to be different, and you can use the full path to avoid errors.

Several good ways to recommend

The code is as follows	Copy Code
Style= "FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=images/fl.png ')" Grammar: Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=benabled, Sizingmethod=ssize, Src=surl)

Enabled: Options available. A Boolean value (Boolean). Sets or retrieves whether the filter is active. true | False true: Default value. Filter activation.
False: Filters are prohibited.

Sizingmethod: Options available. String. Sets or retrieves how a picture of a filter's object is displayed within the bounds of the object container. Crop: Cut the picture to fit the object size.
Image: Default value. Increase or decrease the size boundaries of an object to fit the size of the picture.
Scale: Scales the picture to fit the object's dimension boundaries.

SRC: Required option. String. Specifies the background image using an absolute or relative URL address. If you omit this parameter, the filter will not function.

Characteristics:
Enabled: can read and write. A Boolean value (Boolean). See the Enabled property.
Sizingmethod: can read and write. String. See Sizingmethod properties.
SRC: can read and write. String. See SRC attribute.

Description
Within the bounds of the object container, display a picture between the object's background and content. and provides an operation to cut and resize the picture. If the PNG (Portable Network Graphics) format is loaded, the transparency of 0%-100% is also provided.
The transparency of the pictures in PNG (Portable network Graphics) format does not prevent you from selecting text. That is, you can choose to display the contents behind the fully transparent area of the picture in PNG (Portable Network Graphics) format.

Example: Resolves the problem of PNG transparency invalidation under IE6.

CSS style:

code is as follows

copy code

. png{ _ Background:url (/images/angel.png) no-repeat!important; Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (Enabled=true, Sizingmethod=noscale, src=)/images/ Angel.png "); Background:none; width:118px;height:133px; } . png div{position:relative;} HTML code: <div class= "png" <div> CSS background PNG transparency and link failure resolution </div> </div>   /* compatible with IE6.0, IE7.0, FF, IE7.0, and the new version of FF can be directly transparent without the filter filter. */

=============================================================================

The 1th approach: Define a style that applies this style to a div, and the transparent PNG background image of the div is automatically transparent. (Note that the path of the two pictures is not the same, in this case, the Icon_home.png picture and the HTML file in the same directory)

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd <meta http-equiv= "Content-type" Content= "text/html; charset=gb2312 "/> <title> Untitled document </TITLE> <style type=" Text/css " <!-- . QQ { height:90px; width:90px; Background-image:url (icon_home.png)!important;/* FF IE7 */ Background-repeat:no-repeat; _filter:progid:dximagetransform.microsoft.alphaimageloader (src= ' icon_home.png ');/* IE6 */ _ Background-image:none; /* IE6 */ } </style> <body> <div class= "QQ" ></ Div> </body>

The 2nd way: Define the style for IMG, and all transparent PNG on the page is automatically transparent. (This method is only valid for directly inserted pictures, invalid for background image) Note that to prepare a small transparent picture transparent.gif, size unlimited. Must be placed in the same directory as HTML
Do not use it heavily, or it will cause the page to open slowly!!!)

Home 1 2 last page