Posted By

chrisdpratt on 07/14/10


Tagged

opacity background


Versions (?)

Cross Browser Background Opacity


 / Published in: CSS
 

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.

  1. #box {
  2. color: #000;
  3.  
  4. /* For IE */
  5. background:transparent; zoom:1;
  6. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000); /* IE 5.5 - IE 7 */
  7. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)"; /* IE 8 */
  8. }
  9.  
  10. #box:not(.IE) {
  11. background: #000; /* Fallback for browsers that don't support RGBa */
  12. background: rgba(0,0,0,0.5);
  13. }

Report this snippet  

You need to login to post a comment.