Добавете уеб надпис, който остава със своето изображение

Добавете HTML надписи към уеб изображения в 9 лесни стъпки

Изображенията добавят живот към вашите уеб страници и привличат вниманието на зрителите. Надписите предоставят допълнителна информация за вашите уеб изображения, но те могат да бъдат трудни за добавяне към уеб страници без усъвършенствани HTML и CSS умения. Ето надежден метод за добавяне на лесен, но привлекателен надпис към изображение, което остава с изображението, независимо къде го премествате в уеб страницата.

9 стъпки към надпис HTML изображение

Добавете надпис към изображение и го преместете навсякъде, където искате:

1. Добавете изображение към уеб страницата си.
2. В HTML за вашата уеб страница поставете маркер div около изображението:
   >
3. Добавете атрибут на стила към маркера div:
   style = " text">
4. Задайте ширината на div на същата ширина като изображението, със свойството на стил на ширина :
   width: image width " ;
5. За надписи, които са малко по-малки от околния текст, добавете свойство за размер на шрифта в стил div:
   font size: 80%; ">
6. Надписите изглеждат най-добре, ако са центрирани под изображението, така че да добавите собственост на текстово подравняване към атрибута за стила:
   text-align: center; img src = "URL" alt = "алтернативен текст" ширина = "ширина" височина = "височина" />
7. Накрая добавете малко допълнително пространство между изображението и надписа, като добавите атрибут на стила към изображението със свойство на стил на подложка :
   style = "padding-bottom: 0.5em;" />

1. След това добавете надписа под текста:
   Това е моят надпис

Качете уеб страницата на сървъра си и го тествайте в браузър.

Съвети за надписите

• Ширини : Размерите на CSS могат да бъдат в много различни измервания, така че обикновено трябва да включвате типа измерване. Например: ширина: 100 px ; Въпреки това, величините на HTML изображение винаги са в пиксели, така че оставяте измерването. широчина = "100"
• Ако направите ширината на div по-широка от ширината на изображението, надписите могат да се появят над снимката. Ако това е това, което искате, добавете маркера
  директно пред надписа и след маркера на изображението.