Advanced Search

Return to Snippet

Revision: 28758
at July 14, 2010 03:00 by chrisdpratt
Initial Code 
#box {
    color: #000;
    
    /* For IE */
    background:transparent; zoom:1;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000); /* IE 5.5 - IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)"; /* IE 8 */
}

#box:not(.IE) {
    background: #000; /* Fallback for browsers that don't support RGBa */
    background: rgba(0,0,0,0.5);
}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
This CSS sets semi-transparent background while not affecting the opacity of child elements like using the opacity property would. The text color has been set to the same as the background color to demonstrate this.

Notes:

For the Microsoft filters, color values are in hex with the first two digits specifying the alpha transparency. In this case, that's '80', equivalent to 0.5.

:not(.IE) is added to exclude IE; no current version of IE understands the :not selector. '.IE' can be any valid classname that is NOT used anywhere else.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Cross Browser Background Opacity

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
background

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS