Изображенията добавят живот към вашите уеб страници и привличат вниманието на зрителите. Надписите предоставят допълнителна информация за вашите уеб изображения, но те могат да бъдат трудни за добавяне към уеб страници без усъвършенствани HTML и CSS умения. Ето надежден метод за добавяне на лесен, но привлекателен надпис към изображение, което остава с изображението, независимо къде го премествате в уеб страницата.
Стъпки към надпис на HTML изображение
-
Добавете изображение към уеб страницата си.
-
В HTML за вашата уеб страница поставете маркер div около изображението:
-
Добавете атрибут на стила към маркера div:
стил = ""> -
Задайте ширината на div на същата ширина като изображението със свойството на стил на ширина:
-
За надписи, които са малко по-малки от околния текст, добавете собственост на размер на шрифта в стил div:
-
Надписите изглеждат най-добре, ако са центрирани под изображението, така че добавете собственост на текстово подравняване към атрибута за стила:
-
И накрая, добавете малко допълнително пространство между изображението и надписа, като добавите атрибут на стила към изображението със свойство на стил на подложка:
стил = "подложка дъно: 0.5em;" />
-
След това добавете надписа под текста:
Качете уеб страницата на сървъра си и го тествайте в браузър.
Съвети за надписите
- Размерите на CSS могат да бъдат в много различни измервания, така че обикновено трябва да включвате типа измерване. Например:
ширина: 100пиксела; Въпреки това, величините на HTML изображение винаги са в пиксели, така че оставяте измерването.
широчина = "100"
- Ако направите ширината на div по-широка от ширината на изображението, надписите могат да се появят над снимката. Ако това е това, което искате, добавете a
маркирайте директно преди надписа и след маркера на изображението.
