Практика разработки Web-страниц


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


Тэги HTML обычно помещают элементы на странице последовательно, чтобы они не перекрывались, но иногда текст должен оказаться поверх изображения. Вы можете поместить изображение на задний план или добавить текст в изображение.

Иногда картинки и текст выглядят неправильно

Иногда картинки и текст выглядят неправильно

Если у вас проблемы с размещением текста поверх изображения, сделайте следующее.

  1. Броузеры могут отображать картинки как фон всей страницы, таблицы или отдельной ячейки. Чтобы изображение оказалось ниже текста в ячейке, установите атрибут background для тэга <TD>:

    <td background="powerguy.gif" width=200 height=100 align=center>

    Чтобы изображение отображалось целиком, установите атрибуты ячейки width и height равными размерам изображения. Если изображение окажется меньше ячейки, оно будет размножено, чтобы заполнить всю ячейку.

    Если вы используете FrontPage, вы можете добавить текст в изображение и без использования графических программ. Щелкните на картинке, щелкните на кнопке Text на панели инструментов Picture и наберите текст. Перетаскивайте поле текста, чтобы перемещать или изменять размеры надписи. FrontPage автоматически создает графические комбинации изображения и текста и отображает их на странице.

  2. Для большей надежности вы можете добавить текст в изображение. Откройте изображение в графической программе, такой как Photoshop или Fireworks. Используйте инструменты текста, чтобы ввести и разместить ваш текст. Затем экспортируйте изображение как файл GIF и поместите его на страницу, используя тэг <IMG> (установите атрибут alt для текста, который вы добавили, если пользователи предпочтут не отображать картинку):

    <td align=center><img src="powerguy.gif" width=200 height=120 border=0 alt="Never underestimate the power of a picture."></td>




Начало  Назад  Вперед