Tento příspěvek vysvětluje, jak napsat popisek pod obrázek.
Jak napsat popisek pod obrázek?
Chcete-li napsat popisek pod obrázek, poskytneme různé metody uvedené níže:
- Metoda 1: Jak přidat popis obrázku pomocí HTML “
„Prvek? - Metoda 2: Jak přidat popis obrázku pomocí „ „Prvek?
Metoda 1: Jak přidat popisek obrázku pomocí prvku HTML „
“? Chcete-li přidat popisek obrázku, postupujte podle následujících pokynů:
- Nejprve přidejte „
” prvek, který se používá pro reprezentaci samostatného obsahu, případně s volitelným titulkem. - Dále vložte „
“ tag uvnitř odstavce “ ” tag. Přidejte obrázek pomocí „ src ' atribut. ' všechno ” zobrazí přidaný obsah, pokud se obrázek z nějakého důvodu nezobrazil.
- Nastavte šířku obrázku jako „ 200 pixelů “.
- Poté, „
Značka ” se používá k přidání popisku k obrázku. Navíc přidejte popisek mezi značky „ “:
= 'TSL.png' všechno = 'Tvůrci obsahu TSL' šířka = '200' >
>Můžete vidět, že se zobrazil obrázek se zadaným popiskem:
Nyní přejděte k druhé metodě přidání titulku pomocí CSS.
Metoda 2: Jak přidat popis obrázku pomocí prvku „
“?Chcete-li přidat popisek obrázku pomocí „
“, vyzkoušejte si uvedené pokyny:
- Vytvořit ' ” kontejner a přidejte atribut třídy s názvem “ držák obrazu “.
- Přidat značku nadpisu “ ” pro vložení nadpisu a styl nadpisu podle vašeho výběru.
- Přidejte další prvek „
“ a vložte „„označit spolu s „ src “, “ všechno ' a ' šířka ” mezi kontejnerem div.
- Přidejte třetí „
“ s názvem třídy „ img-caption “. Poté vložte popisek mezi značky „“. Navíc, „
” prvek se používá k přidání jednoho konce řádku:= 'držák obrázku' >
= 'color:rgb(95, 31, 245)' > HTML obrázek >
= 'TSL.png' všechno = „Tvůrci obsahu TSL“ šířka = '200' >
= 'img-caption' >
>
>Lze pozorovat, že titulek k obrázku byl úspěšně přidán:
Nyní se přesuneme k sekci CSS pro použití vlastností.
Styl „.image-holder“ v CSS
Nejprve přejděte na „
'prvek s třídou' .držák obrázku “. Poté použijte následující vlastnosti CSS: .držák obrázku {
pozice : relativní ;
výška : 100 pixelů ;
šířka : 200 pixelů ;
okraj : auto ;
}Podrobnosti o výše uvedených vlastnostech jsou popsány níže:
- ' pozice “ je nastaveno jako “ relativní ” k určení původní pozice prvku, která zůstane v toku dokumentu, stejně jako statická hodnota.
- Pak, ' výška ” se používá k definování výšky prvku.
- ' šířka Vlastnost ” určuje velikost prvku na šířku.
- ' okraj “ je nastaveno jako “ auto ” pro automatické nastavení prostoru kolem prvku.
Popis stylu v CSS
V tomto kroku přistoupíme ke dvěma třídám s názvem „ držák obrazu ' a ' img titulek “ a použijte následující vlastnosti CSS:
.držák obrázku .img-caption {
pozice : absolutní ;
zarovnání textu : centrum ;
tloušťka písma : tučně ;
šířka : 200 pixelů ;
výška : 50 pixelů ;
vlevo, odjet : 0px ;
barva : #f80909 ;
Pozadí : rgb ( 140 , 166 , 253 ) ;
}Popis výše uvedených vlastností je následující:
- ' zarovnání textu “ vlastnost je nastavena jako “ centrum ” pro zarovnání pozice textu na střed.
- Další, ' tloušťka písma “ je přiděleno jako „ tučně ” pro nastavení písma popisku obrázku.
- Poté, „ barva Vlastnost ” se používá pro nastavení barvy přístupného prvku.
- ' Pozadí Vlastnost ” nastavuje barvu pozadí prvku.
- Další vlastnosti, včetně „ pozice “, “ výška ', a ' šířka “ se také používají k použití příslušných funkcí.
Výstup
Probrali jsme metody psaní popisku pod obrázek.
Závěr
Chcete-li napsat popisek pod obrázek, mohou uživatelé použít buď „
'prvek nebo jednoduchý' “ kontejner. Chcete-li použít „“, nejprve přidejte „ ” prvek pro vložení obrázku do “
”, pak použijte prvek „ “ a přidejte mezi jeho značky popisek. Ve druhém přístupu mohou uživatelé jednoduše použít „ ” a aplikujte různé vlastnosti CSS ke zkrášlení titulku. Tento příspěvek demonstroval metody psaní titulku pod obrázek.
- Nejprve přidejte „