Jak napisać podpis pod obrazem? - CSS

W HTML/CSS użytkownicy mogą dodawać różne obrazy i logo podczas tworzenia stron internetowych. Ponadto pozwala użytkownikom dodać podpis obrazu i zalogować się w różnych formach. Na przykład użytkownicy mogą dodać podpis pod obrazem, u góry, lewym lub prawym. W tym celu „„Element jest wykorzystywany.

Ten post wyjaśnia o napisaniu podpisu pod obrazem.

Jak napisać podpis pod obrazem?

Aby napisać podpis pod obrazem, podamy różne metody wspomniane poniżej:

• Metoda 1: Jak dodać podpis obrazu za pomocą HTML ”" Element?
• Metoda 2: Jak dodać podpis obrazu za pomocą „" Element?

Metoda 1: Jak dodać podpis obrazu za pomocą elementu HTML „”?

Aby dodać podpis obrazu, przejrzyj następujące instrukcje:

• Najpierw dodaj „”Element, który jest wykorzystywany do reprezentowania samodzielnej treści, potencjalnie z opcjonalnym podpisem.
• Następnie wstaw „„„Tag w akapicie”

  ”Tag. Dodaj obraz, wykorzystując „src" atrybut. „„Alt”Właściwość pokazuje dodaną zawartość, jeśli obraz nie wyświetli się z jakiegoś powodu.

• Ustaw szerokość obrazu jako „200px".
• A później "”Tag służy do dodania podpisu obrazu. Ponadto dodaj podpis pomiędzy tagami „”:

>

Widać, że obraz z określonym podpisem został wyświetlony:

Teraz przejdź do drugiej metody dodania podpisu za pomocą CSS.

Metoda 2: Jak dodać podpis obrazu za pomocą elementu „”?

Aby dodać podpis obrazu za pomocą „„Element, wypróbuj podane instrukcje:

• Stwórz "”Pojemnik i dodaj atrybut klasowy o nazwie„Utwór obrazowy".
• Dodaj tag nagłówka „

  ”Aby wstawić nagłówek i stylizować nagłówek zgodnie z wyborem.

• Dodaj kolejny „” element i wstaw „”Tag wraz z„src”,„Alt" I "szerokość”Atrybuty pomiędzy kontenerem Div.
• Dodaj trzecią „” z nazwą klasy „IMG-kaptacja". Następnie podaj podpis pomiędzy tagami „”. Co więcej, „
  „Element służy do dodania jednej przerwy w linii:

Obraz HTML

Twórcy treści TSL

Można zauważyć, że podpis obrazu został pomyślnie dodany:

Teraz przejdźmy do sekcji CSS w celu zastosowania nieruchomości.

Styl ”.obraz obrazu ”w CSS

Najpierw uzyskaj dostęp do „„Element posiadający klasę”.Utwór obrazowy". Następnie zastosuj następujące właściwości CSS:

.Obraz Holder
Pozycja: względny;
Wysokość: 100px;
szerokość: 200px;
Margines: Auto;

Szczegóły powyższych właściwości zostały opisane poniżej:

• „„pozycja”Jest ustawiony jako„względny„Aby określić pierwotną pozycję elementu, która pozostaje w przepływie dokumentu, podobnie jak wartość statyczna.
• Następnie, "wysokość”Służy do zdefiniowania wysokości elementu.
• „„szerokość”Właściwość określa rozmiar elementu szerokości.
• „„margines”Jest ustawiony jako„automatyczny„Aby automatycznie ustawić przestrzeń wokół elementu.

Podpis stylu w CSS

W tym kroku uzyskamy dostęp do dwóch klas o nazwie „Utwór obrazowy" I "IMG-kaptacja”I zastosuj następujące właściwości CSS:

.Utwór obrazowy .IMG-Caption
Pozycja: absolutna;
Text-Align: Center;
Font-Weight: Bold;
szerokość: 200px;
Wysokość: 50px;
po lewej: 0px;
Kolor: #F80909;
Tło: RGB (140, 166, 253);

Opis wyżej wymienionych nieruchomości jest następujący:

• „„tekst-align„Własność jest ustalona jako„Centrum”W celu wyrównania pozycji tekstu w środku.
• Następny, "grubość czcionki”Jest przydzielany jako„pogrubiony„Aby ustawić czcionkę podpisu obrazu.
• A później "kolor„Właściwość jest wykorzystywana do ustawiania koloru dostępnego elementu.
• „„tło”Właściwość ustawia kolor tła elementu.
• Inne nieruchomości, w tym „pozycja”,„wysokość", I "szerokość”Są również wykorzystywane do zastosowania odpowiednich funkcji.

Wyjście

Omówiliśmy metody pisania podpisu pod obrazem.

Wniosek

Aby napisać podpis pod obrazem, użytkownicy mogą albo używać „„Element lub prosty”" pojemnik. Aby użyć „”, najpierw dodaj „„Element do osadzenia obrazu w„„Element użyj elementu„ ”i dodaj podpis między jego znacznikami. W drugim podejściu użytkownicy mogą po prostu użyć „”Element i zastosuj różne właściwości CSS, aby upiększyć podpis. Ten post wykazał metody pisania podpisu pod obrazem.