Войти
Регистрация

Пишем текст поверх изображения в CSS

Пишем текст поверх изображения в CSS

Начиная изучать HTML и CSS вполне нормально, что у начинающих возникают различного рода вопросы. Один из них это как разместить текст поверх изображения.

Вполне здоровое проявление интереса. Необходимо закреплять каждую пройденную тему. Так и в нашей статье мы раз и навсегда разберемся с этим вопросом.

Вообще, чтобы расположить текст поверх картинки необходимо знание только одного свойства position и его значений.

Создадим разметку:

<div>
   <img src="forest.jpg" alt="Изображение леса" />
   <span>Текст поверх изображения</span>
</div>

При такой разметке, если не задать стили, текст расположится рядом с картинкой.

Зададим относительное позиционирование для блока, в котором расположено изображение и текст. Размер блока будет зависеть от содержимого:

div {
   position: relative;
}

Зададим абсолютное позиционирование нашему тексту для того, чтобы положение картинки не влияло на положение текста, т.е. сделаем позиционирование текста независимым от других элементов. Также установим координаты текста, цвет и размер шрифта:

div span {
   bottom: 30px;
   color: #FFF;
   font-size: 20px;
   left: 10px;
   position: absolute;
}

Благодаря тому, что мы родительскому блоку установили относительное позиционирование (relative), наш текст будет менять свое положение относительно него, иначе положение текста менялось бы относительно окна браузера. В статье про позиционирование блоков я подробно это описывал.

Результат кода в действии:

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

Текст расположится по тем координатам, которые мы ему задали относительно родителя, т.е. блока div, картинка никак не влияет на положение текста благодаря абсолютному позиционированию.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?