В начальной стадии изучения 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;