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

Добавлен: 

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

Часто, бывает нужно разместить какой то текст поверх изображения, например, для создания кнопок или для других целей. “А почему нельзя текст нанести на картинку в фотошопе?” – спросите вы, а по тому, что такой текст не будет индексироваться поисковыми машинами, и по тому, что такой тест неудобно будет изменить (если это понадобится), и к тому же, подобные изображения с текстом можно генерировать динамически на PHP, подменяя тест.

Принцип размещения текста поверх картинки

Создаём DIV, в котором будет нужная нам картинка. В это же DIV-е, после картинки будет создан ещё один DIV, в котором будет нужный нам текст. В стиле DIV-а с текстом, прописываем position:relative - это свойство устанавливает новое положение элемента, относительно текущего положения. В стиль этого же DIV-а прописываем bottom:37px – это задаст значение смещения элемента вверх.

Ну, вот собственно и всё, но под нашей картинкой, останется пустое место – старое место текста, его нужно убрать. Для этого, в стиль основного DIV-а нужно прописать overflow:hidden – это заставит обрезать содержимое DIV-а, которое вышло за рамки указанных размеров, а теперь указываем размер - height:42px.

Пример кода:

<style type="text/css">
.botton_div{
overflow:hidden;
height:42px;
}
.text_div{
display:block;
position:relative;
bottom:37px;
font-size:25px;
font-weight:bold;
color:#ffffff;
text-indent:15px;
}
</style>

<div class="botton_div">
<img src="button.png"/>
<div class="text_div">Текст</div>
</div>

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

Результат нашей кнопочки:

Текст

 

Не забываем оставлять комментарии и отзывы, нам важно ваше мнение!

А еcли статья Вам очень понравилась и Вы считаете, что она достойна внимания. Тогда просто поделитесь ею, в социальной сети:


Интересная рекламма:


Возможно вам будет интересно
Смайлики на CSS 3 Двойная рамка на CSS 3, объёмная рамка Кнопки для сайта на CSS 3

Комментарий добавил: Гость - Ольга
Добавлен: 10 10 2014 00:12:45
Гость - Ольга
подскажите, пжлст, что я делаю не так - текс спрятан за картинку (это видно при обновлении страницы - на долю секунды мой текст появляется, а потом появляется картинка поверх)

Комментарий добавил: admin
Добавлен: 10 10 2014 14:40:44
ссилку в студию, вожможно вы не указали позишн?

Комментарий добавил: Гость - Ольга
Добавлен: 13 10 2014 20:41:33
Гость - Ольга
<style type="text/css">
#mybox {
height: 390px;
overflow: hidden;
}
#mybox p {
display: block;
position: relative;
bottom:37px;
font-size:25px;
font-weight:bold;
color:#ffffff;
text-indent:15px;
}
</style>

зармер картинки - 320*395

Комментарий добавил: Гость - Ольга
Добавлен: 13 10 2014 20:43:11
Гость - Ольга
продолжение:
<body>
<div id="mybox">
<img src=\'bud.png\'>
<div id="mybox p"> MY TEXT</div>
</div>
</body>

Комментарий добавил: Гость - Велл
Добавлен: 27 10 2014 17:34:19
Гость - Велл
Исправь "mybox p" на "mybox_p" и в html и в CSS

Добавление комментария

Имя -

E-mail -





Читать в Яндекс.Ленте

Яндекс.Метрика


Power by xDroid. Copyright © 2009 - 2016 VEB.name
Копирование информации только с обратной ссылкой
Время генерации страницы : 0.01 сек.