Cross Browser CSS Background Transparency

In a nutshell, this is what I used to achieve somewhat cross browser css background transparency:

#content {
        background-color: rgba(255,255,255,0.3);
}

Then, you’ll of course need to make an exception for stinkin IE:

<!--[if IE]>
   <style type="text/css">
    #content {
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44FFFFFF,endColorstr=#44FFFFFF);
        zoom: 1;
    }
   </style>
<![endif]-->

In the case above, I’m using Microsoft’s gradient, but just going to and from the same color. I’ve wrapped the rule in an if statement and this goes somewhere in after the rest of your CSS has loaded.

I’ll need to do more testing on versions this works with, but for most non-ancient browsers, this works. Looks easy now, but taking so long to get this far, I’m writing this down before it goes down the memory hole and I’m stuck having to figure it all out again.

Special thanks to the following posts, and especially the first on this list:

• CSS Background Transparency Without Affecting Child Elements, Through RGBa And Filters
• Playing Around With CSS3 Colors
• Cross Browser Opacity
• RGBA Colors – CSS3

That’s it for now. This is how I’m getting cross browser css transparency on elements without the transparency being applied to the content.

Edit: Now that I have of course written blog post about this I’m coming across a ton of similar work. Below is a Smipple from joost.kiens which is much simpler that my solution (all styling is handled in a single element without the need for isolating IE):

.rgba {
  background-color: transparent;
  background-color: rgba(200,200,200,0.8);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
}

The code snippet above is from Smipple and is titled Crossbrowser background transparency.