| ||
Текст поверх изображения на 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> Все свойства, неоговоренные выше являются необязательными и служат для дополнительной корректировки. Результат нашей кнопочки: 
Текст
|
| ||
|
| ||
|
| ||
|
| ||
|
| ||
|
| Добавление комментария |
|
|
Авторизация
|