This works great in all browser but all the child elements inherit the opacity setting. Meaning, the text inside will also be semi-transparent.
/* background:rgba(0,100,150,.9); */
background: url(../images/pinstripes-inverted.png);
/* THIS ONE WORKS IN IE9 AND ALL OTHER MODERN BROWSERS */
opacity: .9;
/* THIS ONE WORKS IN IE9 AND IE8 */
/* -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; */
/* THIS ONE WORKS IN IE7 8 and 9…not sure if the zoom is needed */
filter:alpha(opacity=90);
/* zoom: 1; */
If you keep it set to .8 or .9 it will appear ok.
You can use this if there is no background image, just a color:
background:rgba(0,100,150,.9);
