Как написать текст поверх картинки в CSS

Опубликовано: 07.01.2019 в категории: HTML/CSS

Как написать текст поверх картинки в css? Часто этот вопрос возникает у начинающих изучать html и css. Допустим у нас есть изображение и поверх него нам необходимо написать какой-то текст.

картинка для текста

Чтобы написать текст поверх картинки в css большого труда не требуется. Сделать это можно с помощью свойства position и его атрибутов, ну и соответственно оформить текст как нам необходимо. Можно конечно просто прописать блоку div, в котором размещен текст, картинку как фон, об этом я писал ранее: Как поменять фон страницы сайта .

Но этот способ ограничен в возможностях размещения текста поверх картинки в необходимой области. Поэтому лучше использовать свойство position. Такой вариант обеспечит больше преимуществ и мы сможем разместить текст в том месте изображения, где нам необходимо. Для этого воспользуемся свойством position: relative, тогда позиционирование текста будет по отношению к блоку, а не  к браузеру.

Итак прописываем в месте размещения картинки html-код

HTML

<div class='imgblock'>
<img src='img/my_img.jpg' title='Текст поверх картинки'>
<h3><span>Текст поверх картинки</span></h3>
</div>

И в css прописываем соответствующие стили.

CSS

.imgblock {
position: relative;
display: inline-block;
}
.imgblock img {
height: 225px;
width: 400px;
}
.imgblock span {
position: absolute;
top: 20%;
left: 20px;
background: #fbfbbb;
/* opacity: 0.7;
background: rgba(0,0,0,0.7);*/
border-radius: 3px;
color: #cc66ff;
line-height: 30px;
padding: 5px 5px;
}

Вот такой текст поверх картинки у нас получился.

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

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

То есть для свободного позиционирования элементов в основном блоке, прописываем свойство  position: relative;

Форматируем блок div в линейно–блочный элемент display: inline-block;
И  элементу span задаем  position: absolute;
А прочие стили — это оформление текста.

Да, чуть не забыл, мы разместили текст с фоном, но можно было его и не прописывать, если не нужен. И еще, я специально закомментировал свойства opacity: 0.7; и background: rgba(0,0,0,0.7); С помощью первого вы можете сделать свой текст и фон текста полупрозрачными, а с помощью второго полупрозрачным можно сделать только фон текста.

Вот так просто прописать текст поверх картинки в css.

бесплатная накрутка подписчиков вконтакте

Самое читаемое:

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.

Заявка на бесплатную консультацию

Для бесплатной консультации укажите свое имя и номер телефона в форме ниже. Я перезвоню Вам и отвечу на все вопросы.

    Даю свое согласие на обработку персональных данных.

    ×
    Заказать сайт

    Чтобы заказать сайт заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, приму Ваш заказ и назову его ориентировочную стоимость.

      Даю свое согласие на обработку персональных данных.

      ×
      Заказать сайт по акции "Все включено"

      Для заказа сайта по акции «Все включено» заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, и приму Ваш заказ.

        Даю свое согласие на обработку персональных данных.

        ×
        Заказ услуги

        Для заказа услуги заполните форму ниже. Я перезвоню Вам, чтобы уточнить подробности, оговорить сроки и стоимость услуги.

          Даю свое согласие на обработку персональных данных.

          ×