Transparence with rgba for all browsers

Even oldIE supports rgba if you use a filter

HTML

<h1>What a superb headline!</h1>

CSS

h1 {
    background-color: rgb(0,0,0); /* fallback*/
    background: transparent \9; /* for IE */
    background-color: rgba(0,0,0,0.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
      zoom: 1;
    color: #fff;
    font-size: 25px;
    padding: 10px 20px;
    font-family: Verdana, sans-serif;
    width: 400px;
}


html{ background:#efefef; }
body {
    background: #0072ef;
    padding: 40px 20px;
    margin: 20px auto;
    width: 500px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

JavaScript

// translate rgba and hsla into IE-filters with
// http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer
// or with your preferred pre-processor    
    
// if you use a compass-function to get to the IE-color-string
// you will end up with #80000000  instead of #7F000000
// but you won't notice a difference

// http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8    

// IE will be irritated by the normal background-color.
// So I set the background to transparent for IE.
// As IE9 reads this rule, too, but knows to handle rgba(),
// rgba() must come after the IE-reset.