Топ-100 Как написать текст поверх картинки в CSS ~ Сделай сайт

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