Advanced Search

Cross Browser Background Opacity

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.