ZorNet.Ru — сайт для вебмастера » HTML и CSS » Изображение с прозрачным текстом на CSS

Изображение с прозрачным текстом на CSS

Чтоб создать набор текста на изображение, для этого нужно изначально сделать темно прозрачную гамму с помощью CSS, где будет находиться описание. Что подробно разберем в каких случаях можно сделать такое информационное табло, чтоб все корректно смотрелось. Это не так сложно, как кажется, где делается довольно просто, и вы можете достичь желаемого результата, где сами задаете оттенок цвета.

Для того, чтобы на изображении был простой прозрачный текст, то изначально ваша картинка или фоновое изображение должны быть в элементе div, но, а блок контента идет в другом элементе div.

Далее нужно задействовать CSS-свойство opacity, чтобы установить прозрачное изображение или текст. Свойство opacity используется для настройки прозрачности текста или фотографии, где как уже было сказано, что в этом плане вы можете поставить палитру и выставить прозрачность. И здесь нужно знать значение непрозрачности, которое может составлять от 0,0 до 1,0, где низкое значение демонстрирует высокую прозрачность, а высокое значение показывает низкую прозрачность. Степень непрозрачности считается как непрозрачность% = непрозрачность * 100.

Как создать изображение с прозрачным текстом с помощью CSS

Пример:

Создать изображение с прозрачным текстом с помощью CSS

HTML

Код

<div class="kudasd-socumen">
  <img src="http://zornet.ru/_fr/56/8115220.jpg" alt="Notebook" style="width:100%;">
  <div class="dsanu-poged">
  <h2>ZorNet.Ru — сайт для вебмастера</h2>
  <p>В то время как маркетологи и компании используют лучшие методы SEO, чтобы увеличить охват и увеличить трафик, поисковые системы ежедневно меняют свои алгоритмы - трансформируя эти лучшие практики. Сложность в том, что никто не знает, что это за алгоритмы.</p>
  </div>
  </div>

CSS

Код

.kudasd-socumen {
  position: relative;
  max-width: 645px;
  margin: 0 auto;
  }
  .kudasd-socumen img {
  vertical-align: middle;
  }
  .kudasd-socumen .dsanu-poged {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Запасной цвет */
  background: rgba(14, 14, 14, 0.5); /* Черный фон с непрозрачностью 0,5 */
  color: #f3f3f7;
  width: 100%;
  padding: 18px;
  }

Давайте посмотрим на другой пример, где текст установлен на фоновом изображении. Или вместо свойства непрозрачности вы можете просто установить значение цвета RGBA.

Демонстрация

Второй вариант:

Тема аналогична, только темно прозрачный формат идет на все изображение, а по центру по вверх прописаны знаки.

HTML

Код

<header>
  <div class="cugasup-ukedmen">
  <h1>ZorNet.Ru — сайт для вебмастера</h1>
  </div>
  </header>

CSS

Код

body {
  font-family: 'Source Sans Pro', sans-serif;
  }
  header {
  background:
  linear-gradient(
  rgba(14, 14, 14, 0.5),
  rgba(14, 14, 14, 0.5)
  ), url(http://zornet.ru/_fr/56/0712999.jpg);
  background-size: cover;
  height: 100vh;
  }
  .cugasup-ukedmen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  }
  h1 {
  text-transform: uppercase;
  margin: 0;
  font-size: 3rem;
  white-space: nowrap;
  }

Где при открытие страницы мы наблюдаем изображение на полный экран, где также идут аналогичные эффекты затемнение для описание название или заголовков по тематике.

Демонстрация

29 Ноября 2019 Загрузок: 1 Просмотров: 1188 Комментариев: (1)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 29 Ноября 2019 20:24¹ 0 Есть много вариаций, где применяется прозрачный текст, и это один из многих вариантов, где можете посмотреть другой формат вывода прозрачного текста на изображение.