Как сделать текст над картинкой в css
Перейти к содержимому

Как сделать текст над картинкой в css

  • автор:

Как сделать текст над картинкой в css

Вообще, сам вопрос несложен. Нет ничего хитрого, чтобы расположить один блок, поверх другого. Но всё-таки, есть и в этом вопросе несколько моментов, достойных обсуждения. Я думаю найдутся люди, кому это будет интересно.

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

Схема документа

HTML-разметка

 

A Movie in the Park:
Kung Fu Panda

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

CSS

.image < position : relative; width : 100%; /* for IE 6 */ >h2

Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент является блочным элементом, то его мы использовать для этих целей не можем. Воспользуемся inline-элементом . Обернём в него текст внутри заголовка.

A Movie in the Park:
Kung Fu Panda

Будем использовать этот span для оформления текста и фона:

h2 span < color : white; font : bold 24px/45px Helvetica, Sans-Serif; letter-spacing : -1px; background : rgb(0, 0, 0); /* на случай, если следующая строка не сработает */ background : rgba(0, 0, 0, 0.7); padding : 10px; >

Проблемы

Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.

Чтобы решить проблему, необходимо использовать дополнительные span-ы по обе стороны от тега
, в этом случае мы уже сможем воспользоваться padding-ом.

 

A Movie in the Park:

Этим новым span-ам мы зададим свойство padding:

h2 span.spacer

Что на счёт семантики?

На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:

 

A Movie in the Park:
Kung Fu Panda

$(function() < $("h2").wrapInner(""); $("h2 br").before("); 

Как сделать текст над картинкой в css

В связи с переходом на новый движок. возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-02-2024! ��

Текст сверху картинки по центру.

Как поставить картинку по центру картинки!? Как вообще написать текст на картинке html?

Нам понадобится блок div с id " id="tekst_sverhu_kartinki" "

Позиция будет "position: relative;"

Во внутрь поместим картинку и новый блок div с class-ом " class="tekst_sverhu_kartinki" "

И далее нужно позиционировать данный блок с текстом по центру во вертикали и по горизонтали.

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

Чтобы расположить один элемент сверху другого, используется свойство z-index.

Как наложить текст поверх картинки CSS? Z-Index

Это свойство CSS устанавливает порядок элементов в стеке. Оно работает только с элементами, позиционированными с помощью position как absolute, relative, fixed, sticky. Но не static.

Допустим, что экран компьютера расположен – это фон, а реальный мир – на переднем плане. Каждый элемент без указанного z-index является слоем по умолчанию.

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

Вот еще несколько особенностей использования Z-index:

  • Элементы в стеке располагаются в порядке возрастания.
  • По умолчанию слой имеет z-index: 0.
  • Отрицательные значения z-index смещают элемент ниже слоя по умолчанию.
  • Элемент с наименьшим значением z-index будет расположен глубже всех.
  • Положительные значения смещают элементы выше слоя по умолчанию.
  • Элемент с наибольшим значением будет расположен впереди всех.

Пример

Пример

В примере я сместила изображение назад, установив z-index в -1. При этом не нужно указывать значение z-index для текста. Потому что для слоя оно равно 0, что больше, чем -1.

Интерактивные демо-версии

Вот примеры на Codepen и repl.it, с которыми вы можете поэкспериментировать.

Текст под картинкой CSS

Возник такой вопрос: есть блок, где располагается четыре блока в них картинка и под каждой картинкой текст. Текст плавает из-за того, что картинки немного разные по размеру. Как можно это решить? Обернуть картинку в еще один блок и задать размеры? Или есть более элегантный способ решить данную проблему?

 
placeholder+image

ТекстТекстТекстТекстТекст

placeholder+image

ТекстТекстТекстТекстТекст

placeholder+image

ТекстТекстТекстТекст

placeholder+image

ТекстТекстТекстТекстТекст

Пример верстки

По повоуду стилей, то исользовал flex-ы.

Отслеживать
задан 27 апр 2018 в 9:58
tttyyyrrrryyy tttyyyrrrryyy
121 2 2 серебряных знака 10 10 бронзовых знаков
> "Обернуть картинку в еще один блок и задать размеры? ", да оптимальнее будет так
27 апр 2018 в 10:02
а можно выложить css ваш?
28 апр 2018 в 22:28

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Можно задать картинкам фиксированную высоту, и задать свойство object-fit

img.service

P.S. Старайтесь не использовать в верстке заголовков h вообще. У SEO насчет них обычно свои планы, и расставлять их они будут сами.

Отслеживать
ответ дан 30 апр 2018 в 23:55
128 6 6 бронзовых знаков

  • html
  • css
  • вёрстка
  • текст
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *