Добавить надпись, которая остается с изображением на ваши изображения

Изображения добавляют жизнь на ваши веб-страницы и привлекают внимание зрителей. Субтитры предоставляют дополнительную информацию о ваших веб-изображениях, но их сложно добавить на веб-страницы без дополнительных навыков HTML и CSS. Вот надежный способ добавления простой, но привлекательной надписи к изображению, которое остается с изображением, где бы вы ни перемещали его на веб-странице.

Шаги к заголовку HTML-изображения

1. Добавьте изображение на свою веб-страницу.

2. В HTML для вашей веб-страницы поместите тег div вокруг изображения:

   

3. Добавьте атрибут стиля в тег div:

   стиль = «»>

   

4. Установите ширину div равной той же ширине, что и изображение, с свойством стиля width:

   

5. Для титров, которые немного меньше окружающего текста, добавьте свойство font-size в стиль div:

   

6. Заголовки выглядят лучше всего, если они центрированы под изображением, поэтому добавьте свойство text-align к атрибуту style:

   

7. Наконец, добавьте немного дополнительного пространства между изображением и надписью, добавив атрибут стиля к изображению с помощью свойства стиля padding-bottom:

   стиль = "обивка-вниз: 0.5em;" />

8. Затем добавьте текст ниже под изображением:

Загрузите веб-страницу на свой сервер и протестируйте ее в браузере.

Подписывающие советы

• Размеры CSS могут быть во многих разных измерениях, поэтому вы обычно должны включать тип измерения. Например:

  ширина: 100ПВ; Тем не менее, размеры изображения HTML всегда находятся в пикселях, поэтому вы отключите измерение.

  ширина = "100"

• Если ширина div больше ширины изображения, заголовок может появиться рядом с изображением. Если это то, что вы хотите, добавьте
  тег непосредственно перед заголовком и после тега изображения.