В начальной стадии изучения HTML и CSS возникают вполне естественные вопросы, такие как сделать то, как сделать это, так и в нашем случае, как написать текст поверх изображения. Эти вопросы являются нормальным проявлением интереса и требуют закрепления знаний в данной области CSS.
На самом деле выполнить написания текста поверх картинки не столь сложно. Это можно сделать за счёт свойства position
или background-image
, а дальше идет оформление самого текста. То есть блоку div
в качестве фона задаём картинку, на которой должен быть расположен текст.
Мы более подробно рассмотрим эти способы применения текста поверх картинки и выделим их преимущества и недостатки в свойствах position
и background
. Это поможет нам лучше понять, в каких конкретных случаях следует использовать определенный способ размещения текста на изображении.
Текст на картинке CSS. Способ со свойством position
В первом примере мы будем использовать тег img
и свойство position
для свободного перемещения одного элемента над другим. В данном случае это будет текст и изображении.
HTML
<div class="image-container"> <img src="img/1-primer.jpg" alt="Семь чудес света"> <div class="text-overlay"> Великие пирамиды Гизы </div> </div>
CSS
/* демо */ .image-container { position: relative; } .image-container img { max-width: 100%; height: auto; } .text-overlay { position: absolute; bottom: 40px; left: 40px; background-color: rgba(255, 255, 255, 0.7); padding: 10px; border-radius: 5px; color: #000; font-size: 16px; } /* изменить положение текста для моб.устройств */ @media (max-width:490px) { .text-overlay { bottom: 20px; left: 20px; } }
Пояснение:
Для основного блока image-container устанавливаем свойство position: relative
. Это позволяет нам создать область для свободного позиционирования и перемещения элементов внутри этого блока.
Особое внимание уделяем блоку text-overlay, который содержит текст. Для него мы устанавливаем свойство position: absolute
. Это позволяет нам свободно перемещать текстовый элемент в пределах основного блока.
Этот метод подходит практически во всех случаях, за исключением «фоновых блоков», которые полностью заполняют HTML-контейнер изображением. Такой формат часто применим в Landing Page с использованием background-image
, что даёт больше возможностей для адаптивности и создания параллакс-эффекта без скриптов.
Длина текста
Если ваш текст состоит из целого предложения и растягивается на всю ширину, то необходимо правильно его стилизовать, то есть обозначить рамки области. Для этого мы добавим новое свойство width
, чтобы указать ширины блока с текстом.
HTML
<div class="image-container"> <img src="img/2-primer.jpg" alt="Семь чудес света"> <div class="text-overlay"> Висячие сады Семирамиды </div> </div>
CSS
/* демо */ .image-container { position: relative; } .image-container img { max-width: 100%; height: auto; } .text-overlay { position: absolute; bottom: 40px; left: 40px; background-color: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 5px; color: #fff; font-size: 16px; max-width: 365px; /* ширина блока с текстом */ /* размытие заднего фона */ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* изменить положение текста для моб.устройств */ @media (max-width:490px) { .text-overlay { bottom: 15px; left: 15px; font-size: 14px; max-width: 255px; } }
CSS: Каждая строка текста с фоном
Приведенные выше примеры были оформлены с одним сплошным фоном для текста. Но при необходимости можно применить иной подход: установить фон для каждой отдельной строки текста, и при этом с интервалом между ними.
HTML
<div class="image-container"> <img src="img/3-primer.jpg" alt="Семь чудес света"> <div class="text-overlay"><span>Храм Артемиды в Эфесе</span></div> </div>
CSS
/* демо */ .image-container { position: relative; } .image-container img { max-width: 100%; height: auto; } .text-overlay { position: absolute; bottom: 40px; left: 40px; color: #fff; font-size: 16px; max-width: 365px; /* ширина блока с текстом */ } .text-overlay span { box-decoration-break: clone; line-height: 32px; background-color: rgba(0, 0, 0, 0.7); padding: 5px 10px; border-radius: 5px; } /* изменить положение текста для моб.устройств */ @media (max-width:490px) { .text-overlay { bottom: 10px; left: 10px; font-size: 14px; max-width: 285px; } }
В данном примере ключевую роль играет свойство box-decoration-break: clone
, поскольку оно позволяет рассматривать каждую строку как отдельный элемент с теми же стилями оформления, применяемыми ко всему блоку.
Надпись поверх изображения CSS. Способ со свойством background
Этот способ включает в себя применение свойства background-image
для установки изображения в качестве фона HTML-контейнера. И получается, что любое содержимое этого контейнера будет находиться поверх картинки.
HTML
<div class="image-container"> <div class="text-overlay">Мавзолей в Галикарнасе</div> </div>
CSS
/* демо */ .image-container { background-image: url("img/4-primer.jpg"); /* указать путь к картинке */ background-size: cover; background-repeat: no-repeat; background-position: center; height: 300px; max-width: 100%; } .text-overlay { color: #fff; font-size: 16px; background-color: rgba(0, 0, 0, 0.7); padding: 10px 10px; display: inline-block; border-radius: 5px; max-width: 325px; margin-left: 30px; margin-top: 30px; } /* изменить положение текста для моб.устройств */ @media (max-width:490px) { .text-overlay { margin-left: 10px; margin-top: 10px; font-size: 14px; max-width: 285px; } }
Преимущества использования свойства background-image
по сравнению с первым методом заключаются в более гибком управлении стилями CSS. Мы сможем контролировать размер фонового изображения, что позволяет нам адаптировать его даже в том случае, если оно меньше размеров самого блока. И при этом сохраним пропорциональность картинки при заполнении всей доступной области. Кроме того, с помощью CSS можно легко добавить различные эффекты, включая эффект параллакса.
Псевдоэлементы CSS – текст на картинке
Добавление текста на картинку при помощи псевдоэлементов before
или after
применяются крайне редко. Но всё же бывают такие случаи, когда приходится прибегать к этим нестандартным способом. В этом нам поможет свойство content
и свободное позиционирование.
HTML
<div class="image-container"> <img src="img/5-primer.jpg" alt="Семь чудес света"> </div>
CSS
/* демо */ .image-container { position: relative; } .image-container img { max-width: 100%; height: auto; } .image-container:before { content: "Новые «Семь чудес света»"; position: absolute; bottom: 40px; left: 40px; color: #fff; font-size: 16px; max-width: 300px; background-color: rgba(0, 0, 0, 0.7); padding: 15px 10px; border-radius: 5px; } /* изменить положение текста для моб.устройств */ @media (max-width:490px) { .image-container:before { bottom: 10px; left: 10px; font-size: 14px; max-width: 285px; } }
Такой подход будет полезным, когда нет возможности вносить изменения в HTML-код напрямую. В данном случае текст добавляется исключительно через CSS-стили. Он подойдет для небольших фраз и исключительно в дизайнерском оформлении.
Спасибо! Все четко!
Спасибо! А как текст по центру картинки сделать?
text-align: center;