Как лучше реализовать множественные фоны?

Question

[Evanre]

Всем привет, я новичок в вопросах верстки. Тренируюсь на разных макетах. Немного застрял в одном вопросе.
У макета 2 фона: картинка и оверлей в виде 80% черной заливки. Я придумал 2 варианта решения данного вопроса:
1. сделать доп. обертку главному блоку. и получится: доп. блок - rgba(0,0,0,.8), главный блок - картинка.
2. придумать такой фон: background: url(../images/bg_opacity0.8.png), url(../images/bg_main.jpg) top center no-repeat;

Вопрос. Есть ли какие нибудь более универсальные решения проблемы? Что то вроде:rgba(0,0,0,.8), url(../images/bg_main.jpg) top center no-repeat; т.е. использовать как бы 2 фона, только в роли первого будет выступать не прозрачная картинка а альфаканал.

Спасибо.

Answer 1

[Денис Инешин]

Несколько слоев - это норма.

Answer 2

[Саша]

Кинуть оверлей на псевдоэлемент.
Например

.thumb{
	position:relative;
}
.thumb:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.5);
}

Comments

[Evanre]

Отличная идея, вот только такой оверлей перекрывает весь контент на странице. Выкрутился с помощью z-index. Это нормальное решение, или можно сделать как то умнее? :)

[Evanre]

К сожалению не подходит этот вариант. Как я уже говорил, оверлей ложится поверх всего. z-index работает, но контент начинает себя вести не адекватно (выделение текста и т.д.), а прописывать каждому элементу z-index - не вариант.