@narem

Как сделать затенение бекграунда?

Мучаюсь уже фиг знает сколько, нужно затенить бекграунд, но проблема в том что вместе с ним захватывается и текст(а он затеняться не должен). Как быть?
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
	<style>
		.main {
			background: url('image.jpg');
			height: 500px;
			width:500px;
		}
		h2 {
		margin:0;
			color: white;
			}
			.dark{
	position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
}
	</style>
</head>
<body>
<div class="main">
	
	<div><h2>Текст</h2>
	<div class="dark"></div></div>
	
</div>
</body>
</html>
  • Вопрос задан
  • 105 просмотров
Пригласить эксперта
Ответы на вопрос 2
aliencash
@aliencash
Партизан
Принцип такой:
.text {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 200%;
  background-image: url(http://womanwiki.ru/s/images/thumb/c/c5/Fitonyashka2.jpg/300px-Fitonyashka2.jpg);
  color: transparent;
}
.text:hover {
  background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(http://womanwiki.ru/s/images/thumb/c/c5/Fitonyashka2.jpg/300px-Fitonyashka2.jpg);
  color: white;
}

<div class="text">
  Lorem ipsum
</div>
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы