Есть ли способ достичь этого эффекта в кросс-браузерном режиме без необходимости готовить отдельные изображения?
В основном кадр, на котором лежит текст, имеет белый наложение с непрозрачностью 50%. Я бы хотел, чтобы решение, которое не включало создание какого-либо другого изображения в дополнение к фону, но я не знаю, возможно ли это!
Попробуйте RGBA, например
div { background-color: rgba(255, 255, 255, 0.5); }
Как всегда, это не будет работать в каждом браузере, когда-либо написанном.
Если вы не можете использовать rgba из-за поддержки браузера, и вы не хотите включать полупрозрачный белый PNG, вам нужно будет создать два позиционированных элемента. Один для белого ящика, с непрозрачностью, и один для наложенного текста, сплошной.
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); }<!--[if lt IE 9]><body class="browser-ie8"><![endif]-->
<!--[if gte IE 9]><!--><body><!--<![endif]-->
<div class="box">
<div class="back"></div>
<div class="text">
Lorem ipsum dolor sit amet blah blah boogley woogley oo.
</div>
</div>
</body>