Как написать текст поверх картинки в 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