10 февраля 2016      98630      7

Текст поверх изображения. HTML + CSS

Каждый день на форумах html новички спрашивают: «Как разместить текст поверх изображения?». Некоторые находят неправильный выход: они рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в html документах. Но что делать, если текст надо заменить? Опять перерисовывать картинку? Есть более простые решения.

Используя методы, описанные в уроке, мы можем получить такой результат:

1

Подготовка

Возьмём картинку

bg

Её размер — 350px × 200px. И этой информации достаточно для того, чтобы приступить к работе.
Теперь попробуем разместить поверх неё текст несколькими способами.

Способ первый: картинка как фон div

Сразу оговорюсь, что этот способ мне самому не нравится из-за примитивного конечного результата, но тем не менее он существует, поэтому я расскажу о нём.

Суть способа заключается в том, что мы берём тег div, задаём ему размеры, совпадающие с размером изображения, и устанавливаем картинку в качестве фона.
Обратите внимание, что размер тега = собственный размер + размер отступов padding. Таким образом, если мы хотим сделать отступ содержимого от края картинки на 20px, то размер самого div нужно указать на эти 20px меньше. То есть: 350-20 = 330 в ширину и 200-20 = 180 в высоту.

[code lang=»xml»]

<div class="example1">Текст</div>

[/code]

[code lang=»css»].example1 {
padding-top:20px;
width:330px;
padding-left:20px;
height:180px;
background-image:url("/examples/20120821/bg.png");

/*оформление текста*/
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:40px;
}[/code]

Результат:

2

Способ простой по структуре хтмл кода (требуется всего один тег), но зато он не позволяет задать тексту какие-то особые стили. В результате чего может получиться так, что текст будет сложно прочитать. Кроме того, блок жёстко привязан к размерам картинки, а значит, в случае изменения картинки придётся переписывать и css

Способ второй: наложение двух тегов друг на друга

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

[code lang=»xml»]

<div class="example2">
<img src="/examples/20120821/bg.png" class="example_beauty">
<span>Текст</span>
</div>

[/code]

[code lang=»css»].example2 {
display:inline-block;
position:relative;

}
.example2 span {
display:inline-block;
position:absolute;
top:30px;
left:0px;

/* Оформление текста */
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;

/* Фон */
background-color:rgba(0,0,0,.4);
padding:10px 30px;
}[/code]

.example2:
display:inline-block нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
position:relative заставляет все вложенные блоки с position:absolute вести отсчёт координат своего положения не от окна браузера, а от блока .example2.

.example2 span:
display:inline-block — для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
position:absolute — для вынимания тега из общего потока и дальнейшего его размещения с помощью задачи конкретных координат. top, left — отступы сверху и слева (координаты). возможно вместо них использовать bottom (снизу) и right (справа)

Результат:

3

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




Играя с css и структурой тегов можно добиться и такого результата:

1

Данный результат довольно неплохо подходит для оформления галлерей, витрин интернет-магазинов и прочих сервисов.

Код последнего результата:

[code lang=»xml»]

<div class="example3">
<img src="/examples/20120821/bg.png" class="example_beauty" />

<div class="example_text">

<h6>Я — заголовок</h6>

<span>А я — комментарий к этой прекрасной картинке. Я такой длинный, что занимаю несколько строчек.</span>
</div>

</div>

[/code]

[code lang=»css»].example3 {
display:inline-block;
position:relative;
}
.example3 .example_text {
display:block;
position:absolute;
left:0;
bottom:0;
width:100%;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

color:#fff;

padding:10px;
background-color:rgba(0,0,0,.3);

}
.example3 h6 {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
.example3 span {
font-size:12px;
}[/code]

  • Анастасия Сычева

    Спасибо, очень помогло!!

  • Daess Alecto

    Если вы захочели сглаженные края, вот вам недостающий кусок кода

  • юирй

    Спасибо вам огромное

  • Михаил

    нет файла /examples/20120821/bg.png

  • Александр Дубков

    А почему же у вас картинки не адаптивны? Даже те, которые в пример приведены, являются просто картинкой, а не хтмл кодом!

  • 11

    У тебя «каждый день спрашивают», потому что объяснять не умеешь.

  • Спасибо!



Все темы на сайте

© 2019 BorPost · Копирование материалов сайта без разрешения запрещено