Задать вопрос
@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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 140 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Создать сайт на Wordpress
16 мая 2024, в 22:25
500 руб./за проект
Надо с помощью нейросети нарисовать кубики
16 мая 2024, в 22:19
1000 руб./за проект
C++ разработка
16 мая 2024, в 21:15
5000 руб./за проект
Ещё заказы