Задать вопрос
@narem
html

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

Мучаюсь уже фиг знает сколько, нужно затенить бекграунд, но проблема в том что вместе с ним захватывается и текст(а он затеняться не должен). Как быть?
<!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 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
St1myL
@St1myL
Решение - ссылка
Ответ написан
2 комментария
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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Придумать альтернативный логотип к уже существующему
23 дек. 2024, в 07:27
1000 руб./за проект
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Ещё заказы