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

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

Разместить текст поверх изображение на CSS
Безусловно многие замечали на некоторых сайтах, где стоит изображение и на нем прописано описание, размещение идет по разному стилю. Как по умолчанию, что где-то в углу в рамке написано название, также подключаем стили, что при наведении в самом нижу вылазит темно прозрачная гамма и на ней выставлено ключевое слово, но больше всего заголовок, что очень красиво и стильно смотрится. Где не исключаю в плане CEO для поисковых систем, где реальные названия или ключевые слова прикреплены на самой картинке.

Здесь не поспоришь, что CSS очень мощный инструмент, который лучше всего работает, когда он хранится как можно проще. К сожалению существует множество приложений и редакторов HTML, которые создают CSS, что явно не является чем-то простым.

Общий запрос состоит в том, чтобы иметь возможность отображать текст HTML поверх изображения, которое уже встроено на страницу. Существует несколько допустимых решений использующих таблицы или CSS.

Использование TABLE для наложения текста на изображение


Решение HTML стало довольно просто реализовать, но не настолько гибко как более новые варианты.

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

HTML

Код
<table width="459" height="321" background="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/pdy8k37HSwm1L4w4nvaIGQ.png" cellpadding="5" cellspacing="0">
<tr>
<td valign="bottom">
<p><b><font color="#ffffff">
Здесь найдете интересные решения в создание сайтов uCoz
</font></b></p>
</td>
</tr>
</table>

Здесь не нужно применять стилистику, где можно посмотреть на демонстраций.

Работа со стилями и контентом на изображение


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

Расположение текста поверх картинки

HTML

Код
<div class="zornet_tumicam">
<div class="tumolas_redwas">
<p>ZorNet.Ru: Создание сайта на uCoz</p>
</div>
<p class="gursalomen">Здесь решения в создание сайтов uCoz.</p>
</div>

CSS

Код
.zornet_tumicam {
  position: relative;
  background: url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/pdy8k37HSwm1L4w4nvaIGQ.png);
  width: 485px;
  height: 311px;
  }
  .tumolas_redwas {
  position: absolute;
  bottom: 0;
  left: 0.9em;
  width: 387px;
  font-weight: bold;
  color: #f7f3f3f5;
  }
  .gursalomen {
  position: absolute;
  top: 2em;
  right: 3em;
  width: 125px;
  padding: 7px;
  background-color: #f7efeff7;
  font-weight: bold;
  font-size: 12px;
}

Здесь уже видим специальный каркас под заголовок и также можно разместить кратко по материалу. Все реально размещено в демонстрациях.

Отображение текста над изображением при наведении


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

В приведенном ниже примере вы можете увидеть это в действии. Мы установили внешнюю ссылку в позицию: relative и использовали ее атрибут title "название" для создания контента и поместите его поверх изображения.

Как в html поверх картинки наложить текст

HTML

Код
<p><a class="radekali_niglam" href="http://zornet.ru" title="ZorNet.Ru: Создание сайта на uCoz"><img src="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/pdy8k37HSwm1L4w4nvaIGQ.png" width="499" height="312" border="0" alt="ZorNet.Ru"></a></p>

CSS

Код
a.radekali_niglam {
  position: relative;
  width: 499px;
  text-decoration: none !important;
  text-align: center;
}
a.radekali_niglam:after {
  content: attr(title);
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.9em 21px;
  width: 458px;
  background: rgba(14, 14, 14, 0.88);
  text-decoration: none !important;
  color: #ece0e0fa;
  opacity: 0;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
}
  a.radekali_niglam:hover::after, a.radekali_niglam:focus::after {
  opacity: 1.0;
  }

Все три варианта можно применить как в построение сайта, но больше подойдет на добавление материала. Также наблюдаем демонстрацию и можете оценить, как по мне третья вариация больше понравилась.

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

Метод CSS чрезвычайно полезен, поскольку он позволяет вставлять данные в HTML-элементы для использования.
17 Декабря 2017 Просмотров: 3534 Комментариев: (3)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 3
Kosten
Kosten 17 Декабря 2017 13:561
0
Также можете применить другую вариацию по схеме, надпись на изображение. Чтобы разместить текст поверх изображения просто использовать фоновое изображение на HTML-элементе и добавить текст. Это работает если изображение чисто декоративно.



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

HTML

Код
<div class="zornet_runukaneb">
  <img src="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/pdy8k37HSwm1L4w4nvaIGQ.png" alt="sometext" />
  <p>ZorNet: Создание сайта на uCoz</p>
  </div>


CSS

Код
.zornet_runukaneb {
  position: relative;
  width: 250px;
}
.zornet_runukaneb p {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px;
  border: 1px solid #FFF;
  width: 218px;
  color: #FFF;
  margin: 5px;
}
Kosten
Kosten 17 Декабря 2017 14:212
0
Еще один вариант, по тем, размещение текста над изображением.



HTML

Код
<div class="container">
  <img src="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/pdy8k37HSwm1L4w4nvaIGQ.png" alt="zornet.ru" style="width:100%;">
  <div class="bottom-left">Нижняя левая</div>
  <div class="top-left">Верхний левый</div>
  <div class="top-right">В правом верхнем углу</div>
  <div class="bottom-right">Внизу справа</div>
  <div class="centered">ZORNET.RU</div>
</div>


CSS

Код
.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Kosten
Kosten 17 Декабря 2017 14:333
0
Еще один ответ на вопрос, как разместить текстовые блоки в изображении, где будет на темном фоне в нижнем правом углу.



HTML

Код
<div class="sarunimag">
  <img src="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/2sQysYf8Qh_2fn-pU_MPeg.png" alt="Norway" style="width:100%;">
  <div class="redsagun">  
  <h4>ZORNET.RU</h4>
  <p>Создание сайта на uCoz</p>
  </div>
</div>


CSS

Код
.sarunimag {
  position: relative;
}

/* Bottom right text */
.redsagun {
  position: absolute;
  bottom: 19px;
  right: 19px;
  background-color: black;
  color: white;
  padding-left: 17px;
  padding-right: 17px;
}


Демонстрация:
Войдите:
avatar