is there a way to achieve this effect in a cross-browser compatible way without having to prepare separated images?
Basically the frame on which text lays has a white ov
If you can't use rgba
due to browser support, and you don't want to include a semi-transparent white PNG, you will have to create two positioned elements. One for the white box, with opacity, and one for the overlaid text, solid.
body { background: red; }
.box { position: relative; z-index: 1; }
.box .back {
position: absolute; z-index: 1;
top: 0; left: 0; width: 100%; height: 100%;
background: white; opacity: 0.75;
}
.box .text { position: relative; z-index: 2; }
body.browser-ie8 .box .back { filter: alpha(opacity=75); }
Lorem ipsum dolor sit amet blah blah boogley woogley oo.