Detailed explanation of CSS transparency

Original article: http://www.cnblogs.com/zhengchuyu/archive/2008/07/30/1256890.html

 

Transparency often produces good web page visual effects.Compatible with the CSS transparency of mainstream browsersCode:

 
. Transparent_class {filter: alpha (opacity = 50);-moz-opacity: 0.5;-khtml-opacity: 0.5; opacity: 0.5 ;}
 

The preceding attributes are as follows:

• Opacity: 0.5;This is the most important because it is the CSS standard. This attribute supports Firefox, Safari, and opera.
• Filter: alpha (opacity = 50 );This is set for IE6. The value range is 0-100, and the other three values are 0 to 1.
• -Moz-opacity: 0.5;This is to support some earlier versions of Mozilla browsers.
• -Khtml-opacity: 0.5;To support some old versions of Safari browsers.

CSS transparency inheritance

However, the transparency attribute of CSS involves an inheritance problem. When transparency is set for the parent element, the child element will automatically inherit its transparency, for example, the effect of this site:

Even if you specify a transparency of 1 for the child element, it is invalid.

When the sub-element is text, my solution is to check the number of sub-elements, regardless of the number of sub-elements. Another compromise is to specify a relatively deeper color for the text book element. That is to say, when the child element inherits transparency, the text color is exactly what you want. The premise is that the color may be deepened, and the color and transparency values need to be calculated in detail.

And"Cancel transparency inheritanceThis statement is not accurate. As far as I know, there is no way to cancel transparency inheritance. It can only be said that some hack can be used when you want to implement "Multi-Element overwrite, only make the specified Element transparent.

After searching, find a good method to achieve this effect-a question about transparency inheritance. If you are interested, you can check it out. The principle is very simple. Adding an empty element as a transparent layer is similar to the element that does not want to be transparent but needs to be overwritten. The parent element uses position: relative to locate, and the two child elements use position: absolute to locate and overwrite.

Alpha filter of IE

 

To display the 30% transparency of an element in IE, you can add it to the CSS attribute list of the element.

 

Filter: alpha (opacity = 30 );

 

Use the Alpha filter of IE (which has more powerful functions and will be mentioned later) to achieve transparency.

 

There are two ways to change the transparency of elements through javascript:

 

OBJ. Filters. Alpha. Opacity = Value;

Or another intuitive method.

OBJ. style. Filter =   ' Alpha (opacity = '   + Value +   ' ) ' ;

 

Note the form of the singular and plural filter in the two methods. In the first method, the filters object is a unique object of IE. Therefore, we can determine whether the client uses the IE browser by judging whether the filter object exists.

 

Opacity attributes of Firefox and opera

 

Firefox and opera do not have filters (I don't know if I understand them correctly). To make the elements in Firefox and opera transparent, you can use a CSS attribute not available in IE: opacity. Simply put, we can add

 

Opacity = 0.3;

 

Note: here, the maximum opacity (that is, opacity) is 1, instead of 100 indicating opacity as the opacity parameter in the Alpha attribute of IE.

 

To change transparency through JavaScript, you only need to use the method that normally changes the CSS attribute.

 

Crossbrowers

 

Finally, based on the above differences, write a common (cross-browser) function to set the element transparency attribute.

 

Function Setopacity (ELEM, level ){
If (ELEM. filters ){ // For IE
ELEM. style. Filter =   ' Alpha (opacity = '   + Level +   ' ) ' ;
// Zoom must be set, otherwise transparency does not take effect in IE from: http://blog.csdn.net/dxx1988/article/details/6581430
ELEM. style. Zoom =   1 ;
} Else { // Otherwise, W3C
ELEM. style. Opacity = Level /   100 ;
}
}

 

Alpha goes further

 

Although only ie supports filters, I 'd like to discuss it further here. After all, this is different from other non-compatibility of IE. The filter is an excellent extension of IE, something out of the standard, rather than violating the standard. We even hope it can be upgraded to the standard, in this way, we can simply process images with filters to make better results.

 

Instance code:

Code
< Script Type = "Text/JavaScript" >
Function Setalpha (){
VaR Temp = Document. getelementbyid ( ' Test ' );
Val = Parseint (temp. Filters. Alpha. Style );
If ( ++ Val > 3 ) Val =   0 ;
Temp. Filters. Alpha. Style = Val;
}
</ Script >
< Style Type = "Text/CSS" >
# Test {  
Width : 300px ; Height : 100px ; Border : 1px solid #000 ; Background-color : # 0000ff ;  
Filter : Alpha (opacity = 100, finishopacity = 0, style = 0) ;   }
</ Style >
< Div ID = "Test" > </ Div >
< Input Type = "Button" Value = "Click to view three effects" Onclick = "Setalpha ()"   />

 

In addition to the opacity/finishopacity/style parameters used in the effect, enable/startx/starty/finishx/finshy can be used to set or retrieve whether the filter is activated, the other four are related to the starting position of the transparency effect. We will not go into detail here.