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

HTML и CSS WordSmall

В начальной стадии изучения языков HTML, CSS и пр. появляются (как это и должно быть) вопросы: как сделать так, или вот, так и в нашем вопросе, как написать текст поверху изображения. Вполне естественное проявление интереса, и требует закрепление знаний в этой области. Но для выполнения этой задачи вы уже должны знать хоть малую часть CSS чтобы понимать базовые свойства каскадной таблицы.

На самом деле выполнить написания текста поверх картинки не столь трудно. Практически делается за счет свойства position и его атрибутов, а дальше идет оформление самого текста. Можно попробовать сделать по-другому, к примеру, задать блоку div фон при этом использовать ту картинку, на которой должен быть расположен текст.

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

Рассмотрим на первом примере.

HTML

<div class='imgblock'>
<img src='egipet.jpg' title='Семь чудес света'>
<span>Пирамиды Египта</span>
</div>

CSS

.imgblock {
    position: relative;
    display: inline-block;
}

.imgblock img {
    height: 160px;
    width: 250px;
}
.imgblock span {
    /*background: rgba(0,0,0,0.7); (полупрозрачность)*/
    background: #222;
    color: #fff;
    border-radius: 2px;
    position: absolute;
    right: 0;
    bottom: 10px;
    font-size: 18px;
    padding: 3px 5px;
}

Результат.

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

Пояснение. Основному блоку приписывается значение position: relative; этим мы обозначаем область для свободного позиционирования последующих элементов в этом классе.

Далее, форматируем div в линейно–блочный элемент display: inline-block;

И последнее на что стоит обратить внимание — это position: absolute;, задан элементу <span>.

Остальные стили идут как оформление текста.

Во втором примере используем более длинную надпись на картинке и стилизуем ее должным образом.

HTML

<div class='imgblock2'>
<img src='sad.jpg' title='Семь чудес света'>
<h2><span>Семь чудес света <br /> Висячие сады Семирамиды</span></h2>
</div>

CSS

.imgblock2 {
     position: relative;
    display: inline-block;
}

.imgblock2 img {
    height: 160px;
    width: 250px;
}

.imgblock2 h2 {
    left: 0;
    position: absolute;
    top: 10px;
    width: 100%;
    left: 5px;
}
.imgblock2 h2 span {
    background: #222;
    border-radius: 2px;
    color: #fff;
    font: 16px arial;
    line-height: 29px;
    padding: 3px 5px;
}

Результат.

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

Ну вот незадача, мы использовали тег <br /> — перенос строки и в итоги получили разрыв между пробелами. Это видно в примере где текст плотно прилегает краям и на вид получается не очень красиво.

Исправить эту ошибку можно по-разному. Применить, к примеру, неразрывный пробел &nbsp, что позволит нарастить промежуток.

Пример.

HTML

<div class='imgblock2'>
<img src='sad.jpg' title='Семь чудес света'>
<h2><span>Семь чудес света &nbsp<br />&nbsp Висячие сады Семирамиды</span></h2>
</div>

CSS

.imgblock2 {
     position: relative;
    display: inline-block;
    margin: 100px;
}

.imgblock2 img {
    height: 160px;
    width: 250px;
}

.imgblock2 h2 {
    left: 0;
    position: absolute;
    top: 10px;
    width: 100%;
    left: 5px;
}
.imgblock2 h2 span {
    background: none repeat scroll 0 0 #222;
    border-radius: 2px;
    color: #fff;
    font: 16px arial;
    line-height: 29px;
    padding: 3px 5px;
}

Результат.

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

Во втором способе применим тег <b>…</b> он как <strong> только жирность поменьше, но мы ее совсем уберем.

Пример.

HTML

<div class="imgblock3">
<img src='sad.jpg' title='Семь чудес света'>
<span>
<b>Семь чудес света</b>
<b>Висячие сады Семирамиды</b>
</span>
</div>

CSS

.imgblock3 {
    position: relative;
   display: inline-block;
}
.imgblock3 img {
    height: 200px;
    width: 300px;
}
.imgblock3  span {
    left: 10px;
    position: absolute;
    top: 10px;
    width: 100%;
}
.imgblock3 span b {
    background: #222;
    color: #fff;
    font: 16px/34px arial;
    padding: 6px 10px;
    white-space: nowrap;
    border-radius: 3px;
}

Результат.

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

В стилях добавили новое свойство white-space: nowrap; чтобы текст находился на одной строке. На этом все, сложного думаю ничего нет.

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code