• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Наложение текста на изображение на CSS (Наложение изображений с уменьшенной непрозрачностью гаммой)
Наложение текста на изображение на CSS
Kosten
Дата: Понедельник, 2020-03-16, 20:08 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26125
Награды: 60


Это простой способ, где вы можете при помощи CSS, сделать красивое наложение текста по вверх картинки или изображение. Тем вы изначально можете задать название, что в большинстве можно встретить, но также все красиво оформить. Здесь мы просто делаем наложение без всякого дизайна, где выводим знаки в белом оттенке.



HTML

Код
<div class="seducen-apacanu">
  <p>ZORNET.RU</p>
</div>

CSS

Код
div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: url("ссылка на изображение");
  width: 46.875rem;
  height: 31.25rem;
  font-size: 3.75rem;
  font-family: sans-serif;
}
.seducen-apacanu {
  position: relative;
}
.seducen-apacanu::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
}
p {
  color: white;
  opacity: 1;
  z-index: 999;
}

Как можно заметить, что картинку немного затемнили, это по вверх также наложили прозрачно темную гамму.

Демонстрация
Прикрепления: 6330595.jpg(28.7 Kb) · image-overlay-w.zip(2.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Наложение текста на изображение на CSS (Наложение изображений с уменьшенной непрозрачностью гаммой)
  • Страница 1 из 1
  • 1
Поиск: