Часто, бывает нужно разместить какой то текст поверх изображения, например, для создания кнопок или для других целей. “А почему нельзя текст нанести на картинку в фотошопе?” – спросите вы, а по тому, что такой текст не будет индексироваться поисковыми машинами, и по тому, что такой тест неудобно будет изменить (если это понадобится), и к тому же, подобные изображения с текстом можно генерировать динамически на PHP, подменяя тест.
Принцип размещения текста поверх картинки
Создаём DIV, в котором будет нужная нам картинка. В это же DIV-е, после картинки будет создан ещё один DIV, в котором будет нужный нам текст. В стиле DIV-а с текстом, прописываем position:relative - это свойство устанавливает новое положение элемента, относительно текущего положения. В стиль этого же DIV-а прописываем bottom:37px – это задаст значение смещения элемента вверх.
Ну, вот собственно и всё, но под нашей картинкой, останется пустое место – старое место текста, его нужно убрать. Для этого, в стиль основного DIV-а нужно прописать overflow:hidden – это заставит обрезать содержимое DIV-а, которое вышло за рамки указанных размеров, а теперь указываем размер - height:42px.
Все свойства, неоговоренные выше являются необязательными и служат для дополнительной корректировки.
Результат нашей кнопочки:
Текст
Поделиться:
Комментарий добавил: Гость - Ольга
Добавлен: 10 10 2014 00:12:45
Гость - Ольга
подскажите, пжлст, что я делаю не так - текс спрятан за картинку (это видно при обновлении страницы - на долю секунды мой текст появляется, а потом появляется картинка поверх)