Задать вопрос
@sirinotapple
css

Как прозрачным цветом перекрыть непрозрачный текст?

У меня есть
<!DOCTYPE html>

<body>

	<div class="color-transparent"></div>
	<div class="text">123321</div>

	<style>
		div {
			width: 100px;
			height: 25px;
		}

		.color-transparent {
			position: absolute;
			background: rgba(0, 0, 255, 0.267);
		}
	</style>
</body>

</html>

Я хочу чтобы когда полупрозрачный div находится над непрозрачным текстом — текст исчезал. Как такое реализовать?
  • Вопрос задан
  • 210 просмотров
3 комментария
Подписаться 2 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 1
@Kvason
Веб-разработчик
Оберни прозрачный блок в непрозрачный блок например с белым цветом и тогда он перекроет
<!DOCTYPE html>

<body>

  <div id="tr"><div class="color-transparent"></div></div>
  <div class="text">123321</div>

  <style>
    div {
      width: 100px;
      height: 25px;
    }
    #tr{
      background:white;
      position: absolute;
    }
    .color-transparent {
      background: rgba(0, 0, 255, 0.267);
    }
  </style>
</body>

</html>
Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend разработчик
Базис-Центр • Коломна
от 30 000 до 70 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Внести правки в проект на nest и react
05 мая 2024, в 06:38
50000 руб./за проект
Специалист по телеграм
05 мая 2024, в 04:55
12000 руб./за проект
Название проекта: Бот Telegram для автоматизации судебных приказов
05 мая 2024, в 02:15
30000 руб./за проект
Ещё заказы