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

Пишем текст поверх изображения на CSS

В этом материале подробно разберем вопрос с несколькими примерами, как можно разместить текст поверх изображения, где задействуем HTML и CSS3. Так что давайте на примере создадим текст в нужном вами поле, что изначально идет поверх изображений. Это простые и надежные способы по созданию прозрачного блока, который может быть добавлен к заданной картинки, где идет стильное оформление на данное изображение.

Если наложение является достаточно непрозрачным, то в этом случай у вас или веб разработчика может быть в разной палитре цвета изображение, что предоставлено ниже. Но считаю главным, это корректно выводится знаки для текста, что будут полностью читаемым. Если ранее рассматривали варианты, где уже научились создавать с последующим размещением текстовых блоков поверх картинок, где текста идет выше.

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

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

Пример как разместить текст поверх изображения на HTML и CSS

Текстовый блок на изображении

Пример #1

HTML

Код

<div class="akumake-vanoson">
  <img src="http://zornet.ru/_fr/56/2619726.jpg" alt="Все для сайта" />
  <div class="kudasem-gopavan">
  <h3>Здесь идет заголовок</h3>
  <p>Это краткое описание, которое находится в блоке.</p>
  </div>
  </div>

CSS

Код

.akumake-vanoson {
  position: relative;
  }

.kudasem-gopavan {
  position: absolute;
  bottom: 48px;
  left: 15px;
  background-color: #0a0a0a;
  opacity: .7;
  color: #f7f4f4;
  text-shadow: 0 1px 0 #151515;
  padding-left: 18px;
  padding-right: 18px;
}

.akumake-vanoson img{
  width:57%;
  }

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

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

Пример #2

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

HTML

Код

<div class="asucadego-abvasemen">
  <h2>ZorNet.Ru</h2>
  </div>
  <div class="asucadego-abvasemen alsaden">
  <h2>Пишем текст</h2>
  </div>

CSS

Код

.asucadego-abvasemen {
  margin: 5px;
  width: 245px;
  height: 162px;
  float: left;
  background: url(http://zornet.ru/_fr/56/6665122.jpg);
  background-size: cover;
  position: relative;
  }
  h2 {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(8, 8, 8, 0.75);
  padding: 5px 10px;
  color: #f9f6f6;
  margin: 0;
  font: 14px Sans-Serif;
  }
  .alsaden h2 {
  background: rgba(236, 236, 236, 0.75);
  color: black;
  }

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

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

Добавить эффект размытия в текстовый блок

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

Адаптивный блок с картинкой поверх изображений

Пример #3

HTML

Код

<div class="mutneniye-kartinka">
  <header>
  <h2>
  ZorNet.Ru — сайт HTML + CSS
  </h2>
  </header>
  </div>

CSS

Код

* {
  box-sizing: border-box;
  }
  .mutneniye-kartinka {
  background: url(http://zornet.ru/_fr/56/1166331.jpg);
  background-attachment: fixed;
  width: 365px;
  height: 245px;
  position: relative;
  overflow: hidden;
  margin: 20px;
  }
  .mutneniye-kartinka > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 8px;
  background: inherit;
  background-attachment: fixed;
  overflow: hidden;
  }
  .mutneniye-kartinka > header::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 215%;
  height: 215%;
  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  }
  .mutneniye-kartinka > header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  background: rgba(12, 12, 12, 0.25);
  }
  .mutneniye-kartinka > header > h2 {
  margin: 0;
  color: #f9f9f9;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 #151414;
}

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

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

Пример #4

HTML

Код

<div class="demysam-akoblegus">
  <header>
  <h2>
  Эффект размытия
  </h2>
  </header>
  </div>

CSS

Код

* {
  box-sizing: border-box;
  }
  .demysam-akoblegus {
  background: url(http://zornet.ru/_fr/56/6303328.jpg);
  background-attachment: fixed;
  width: 371px;
  height: 227px;
  position: relative;
  overflow: hidden;
  margin: 18px;
  }
  .demysam-akoblegus > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 18px 10px;
  background: inherit;
  background-attachment: fixed;
  }
  .demysam-akoblegus > header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  transform: scale(2) translateY(20px);
  }
  .demysam-akoblegus > header > h2 {
  margin: 0;
  color: #f9f6f6;
  text-shadow: 0 1px 0 #151414;
  position: relative;
  z-index: 1;
  }

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

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

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

30 Ноября 2019 Загрузок: 2 Просмотров: 6921 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0