W tym poście wyjaśniono, jak pisać podpis pod obrazem.
Jak napisać podpis pod obrazem?
Aby napisać podpis pod obrazem, udostępnimy różne metody wymienione 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, wykonaj następujące instrukcje:
- Najpierw dodaj „
”, który jest używany do reprezentowania samodzielnej treści, potencjalnie z opcjonalnym podpisem. - Następnie wstaw „
” znacznik w akapicie „ ”znacznik. Dodaj obraz, korzystając z opcji „ źródło ' atrybut. „ wszystko ” pokazuje dodaną zawartość, jeśli obraz nie został wyświetlony z jakiegoś powodu. - Ustaw szerokość obrazu jako „ 200 pikseli ”.
- A później '
Znacznik ” służy do dodawania podpisu do obrazu. Ponadto dodaj podpis pomiędzy tagami „ ”:
>
Możesz zobaczyć, że obraz z określonym podpisem został wyświetlony:
Teraz przejdź do drugiej metody dodawania podpisu za pomocą CSS.
Metoda 2: Jak dodać podpis obrazu za pomocą elementu „”?
Aby dodać podpis obrazu za pomocą „
- Stwórz '
- Dodaj tag nagłówka „ ”, aby wstawić nagłówek i stylizować nagłówek zgodnie z własnym wyborem.
- Dodaj kolejny element „” i wstaw „
- Dodaj trzeci „” z nazwą klasy „ img-caption ”. Następnie umieść podpis pomiędzy znacznikami „”. Ponadto „
Element ” służy do dodania jednego końca linii:
= „posiadacz obrazu” >
= 'kolor: rgb(95, 31, 245)' > Obraz HTML >
>
<źródło img = 'TSL.png' wszystko = „Twórcy treści TSL” szerokość = „200” >
= „img-caption” > > Twórcy treści TSL >
>
>
Można zauważyć, że podpis do obrazu został pomyślnie dodany:
Przejdźmy teraz do sekcji CSS dotyczącej stosowania właściwości.
Styl „.image-holder” w CSS
Najpierw uzyskaj dostęp do „
.posiadacz obrazu {
pozycja : względny ;
Wysokość : 100 pikseli ;
szerokość : 200 pikseli ;
margines : automatyczny ;
}
Szczegóły wyżej wymienionych właściwości opisano poniżej:
- „ pozycja ” jest ustawione jako „ względny ”, aby określić pierwotną pozycję elementu, która pozostaje w obiegu dokumentu, podobnie jak wartość statyczna.
- Następnie, ' Wysokość ” służy do określenia wysokości elementu.
- „ szerokość ” określa rozmiar elementu w szerokości.
- „ margines ” jest ustawione jako „ automatyczny ”, aby automatycznie ustawić odstęp wokół elementu.
Podpis stylu w CSS
W tym kroku uzyskamy dostęp do dwóch klas o nazwie „ posiadacz obrazu ' oraz ' img-caption ” i zastosuj następujące właściwości CSS:
.posiadacz obrazu .img-caption {
pozycja : absolutny ;
wyrównanie tekstu : Centrum ;
grubość czcionki : pogrubienie ;
szerokość : 200 pikseli ;
Wysokość : 50px ;
lewy : 0px ;
kolor : #f80909 ;
tło : rgb ( 140 , 166 , 253 ) ;
}
Opis wyżej wymienionych właściwości jest następujący:
- „ wyrównanie tekstu ” właściwość jest ustawiona jako „ Centrum ”, aby wyrównać pozycję tekstu na środku.
- Następny, ' grubość czcionki ” jest przydzielany jako „ pogrubienie ”, aby ustawić czcionkę podpisu obrazu.
- A później ' kolor ” służy do ustawiania koloru elementu, do którego uzyskuje się dostęp.
- „ tło ” określa kolor tła elementu.
- Inne właściwości, w tym „ pozycja ”, „ Wysokość ', oraz ' szerokość ” są również używane do zastosowania odpowiednich funkcji.
Wyjście
Omówiliśmy metody pisania podpisu pod obrazem.
Wniosek
Aby napisać podpis pod obrazem, użytkownicy mogą użyć opcji „ ”, najpierw dodaj „ ” i dodaj podpis między jego znacznikami. W drugim podejściu użytkownicy mogą po prostu użyć „
Aby dodać podpis obrazu za pomocą „
- Stwórz '
” kontener i dodaj atrybut klasy o nazwie „ posiadacz obrazu ”. - Dodaj tag nagłówka „ ”, aby wstawić nagłówek i stylizować nagłówek zgodnie z własnym wyborem.
- Dodaj kolejny element „” i wstaw „
”oznacz razem z„ źródło ”, „ wszystko ' oraz ' szerokość ” atrybuty pomiędzy kontenerem div. - Dodaj trzeci „
” z nazwą klasy „ img-caption ”. Następnie umieść podpis pomiędzy znacznikami „”. Ponadto „
Element ” służy do dodania jednego końca linii:= „posiadacz obrazu” >
= 'kolor: rgb(95, 31, 245)' > Obraz HTML >
<źródło img = 'TSL.png' wszystko = „Twórcy treści TSL” szerokość = „200” >
= „img-caption” >
>
>Można zauważyć, że podpis do obrazu został pomyślnie dodany:
Przejdźmy teraz do sekcji CSS dotyczącej stosowania właściwości.
Styl „.image-holder” w CSS
Najpierw uzyskaj dostęp do „
.posiadacz obrazu {„element posiadający klasę” .posiadacz obrazu ”. Następnie zastosuj następujące właściwości CSS:
pozycja : względny ;
Wysokość : 100 pikseli ;
szerokość : 200 pikseli ;
margines : automatyczny ;
}Szczegóły wyżej wymienionych właściwości opisano poniżej:
- „ pozycja ” jest ustawione jako „ względny ”, aby określić pierwotną pozycję elementu, która pozostaje w obiegu dokumentu, podobnie jak wartość statyczna.
- Następnie, ' Wysokość ” służy do określenia wysokości elementu.
- „ szerokość ” określa rozmiar elementu w szerokości.
- „ margines ” jest ustawione jako „ automatyczny ”, aby automatycznie ustawić odstęp wokół elementu.
Podpis stylu w CSS
W tym kroku uzyskamy dostęp do dwóch klas o nazwie „ posiadacz obrazu ' oraz ' img-caption ” i zastosuj następujące właściwości CSS:
.posiadacz obrazu .img-caption {
pozycja : absolutny ;
wyrównanie tekstu : Centrum ;
grubość czcionki : pogrubienie ;
szerokość : 200 pikseli ;
Wysokość : 50px ;
lewy : 0px ;
kolor : #f80909 ;
tło : rgb ( 140 , 166 , 253 ) ;
}Opis wyżej wymienionych właściwości jest następujący:
- „ wyrównanie tekstu ” właściwość jest ustawiona jako „ Centrum ”, aby wyrównać pozycję tekstu na środku.
- Następny, ' grubość czcionki ” jest przydzielany jako „ pogrubienie ”, aby ustawić czcionkę podpisu obrazu.
- A później ' kolor ” służy do ustawiania koloru elementu, do którego uzyskuje się dostęp.
- „ tło ” określa kolor tła elementu.
- Inne właściwości, w tym „ pozycja ”, „ Wysokość ', oraz ' szerokość ” są również używane do zastosowania odpowiednich funkcji.
Wyjście
Omówiliśmy metody pisania podpisu pod obrazem.
Wniosek
Aby napisać podpis pod obrazem, użytkownicy mogą użyć opcji „
”element lub prosty” ' pojemnik. Aby użyć „ ”, najpierw dodaj „ ”, aby osadzić obraz w „ ”, a następnie użyj elementu „ ” i dodaj podpis między jego znacznikami. W drugim podejściu użytkownicy mogą po prostu użyć „ ” i zastosuj różne właściwości CSS, aby upiększyć podpis. Ten post zademonstrował metody pisania podpisu pod obrazem. - Dodaj trzeci „