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

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

  • автор:

Как разместить текст поверх картинки?

Доброго времени суток. Сейчас пытаюсь разместить текст поверх адаптивного изображения в bootsrtrap. Но ничего не выходит. Подскажите лучшее решение для реализации.

 

text

Что нужно добавить?

  • Вопрос задан более трёх лет назад
  • 34088 просмотров

Комментировать

Решения вопроса 1

iiiBird

iBird Rose @iiiBird Куратор тега HTML

Пока ты спишь — твой конкурент совершенствуется

 

text

.img-wrap < position: relative; >.img-wrap h1

Ответ написан более трёх лет назад

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

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

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

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

Я сделал текст во рту у Вейдера. (получилось это так wild=413 padding-left=303 height=100 padding-top=250)

padding-top : 250px ;
width : 413px ;
padding-left : 303px ;
height : 100px ;
background-image : url ( «http://dml.ucoz.net/_sf/0/51237425.jpg» );
/*оформление текста*/
color : #FFF ;
font-family : Arial , Helvetica , sans-serif ;
font-size : 40px ;

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

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

< span >Я твой отец.

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

display :inline- block ;
position : relative ;
.example 2 span < display :inline- block ; position : absolute ; /* Оформление текста */ color : #FFF ; font-family : Arial , Helvetica , sans-serif ; font-size : 20px ; background-color :rgba( 0 , 0 , 0 ,. 4 ); padding : 10px 30px ;

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

Я твой отец.

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

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

Дарт Вейдер

Верховный Главнокомандующий Имперской армией, Владыка Ситх

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

Как разместить текст поверх изображения с помощью CSS

При создании фотогалереи или чего-то подобного вам может потребоваться разместить текст или описание поверх изображения. Вы можете использовать методы абсолютного позиционирования в сочетании со свойством margin для позиционирования или размещения текста поверх изображения (т. е. элемента ).

Давайте посмотрим на следующий пример, чтобы понять, как это работает:

    Placing Text Over an Image in CSS    
Воздушные змеи

Воздушные змеи

beget banner 480x320 jivo banner 480x320 flexbe banner 480x320

Читайте также

Похожие примеры:
  • Как центрировать выравнивание с абсолютным позиционированием div с помощью CSS
  • Как выровнять текст по вертикали по центру в элементе div с помощью CSS
  • Как вертикально выровнять изображение внутри div с помощью CSS

Разметка HTML

Разметка довольно простая. Тег div служит для оборачивания картинки img и текста span.

   
LaptopУроки по программированию

Наложение в CSS

Задаем фиксированные значения ширины и высоты для div. Позиционирование у блока div относительное — это значит, что картинка и текст будут располагаться относительно блока.

Для тега img задаем ширину и высоту на весь размер родительского блока. Позиционирование относительное. Свойство object-fit: cover встроит картинку внутрь div. Если хотите, чтобы края у картинки не обрезались — сделайте размеры div равные размеры картинки img.

div < width: 600px; height: 500px; position: relative; >img < width: 100%; height: 100%; position: absolute; object-fit: cover; >span

Для текста также задаем абсолютное позиционирование. Свойства top, left, и transform отвечают за выравнивание. В коде мы выравниваем текст по центру.

Если необходимо выровнять по другому, тогда уберите свойство transofrm и задайте:

  1. top: 0, left: 0 — левый верхний край
  2. top: 0, right: 0 — правый верхний край
  3. bottom: 0, left: 0 — левый нижний край
  4. bottom: 0, right: 0 — правый нижний край

Вместо нолей можно задавать значения в пикселях. Например top: 50px — отступит от верхнего края 50 пикселей.

Warning: Undefined variable $aff_bottom_mark in /sites/codelab.pro/wp-content/themes/myTheme/dist/partials/post/post_base.php on line 58

Warning: Undefined variable $aff_bottom_info in /sites/codelab.pro/wp-content/themes/myTheme/dist/partials/post/post_base.php on line 62

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

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