Evanre
@Evanre
Front-end developer

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

Всем привет, я новичок в вопросах верстки. Тренируюсь на разных макетах. Немного застрял в одном вопросе.
У макета 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 фона, только в роли первого будет выступать не прозрачная картинка а альфаканал.

Спасибо.
  • Вопрос задан
  • 423 просмотра
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
userAlexander
@userAlexander
Верстка наше все)
Кинуть оверлей на псевдоэлемент.
Например
.thumb{
	position:relative;
}
.thumb:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.5);
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы