Tento príspevok vysvetľuje, ako napísať popis pod obrázok.
Ako napísať popis pod obrázok?
Ak chcete napísať popis pod obrázok, poskytneme rôzne spôsoby uvedené nižšie:
- Metóda 1: Ako pridať popis obrázka pomocou HTML “
' Prvok? - Metóda 2: Ako pridať popis obrázka pomocou „ ' Prvok?
Metóda 1: Ako pridať popis obrázka pomocou prvku HTML „
“? Ak chcete pridať popis obrázka, postupujte podľa nasledujúcich pokynov:
- Najprv pridajte „
“, ktorý sa používa na reprezentáciu samostatného obsahu, prípadne s voliteľným titulkom. - Ďalej vložte „
„značka v odseku“ ” tag. Pridajte obrázok pomocou „ src “. ' všetko ” zobrazí pridaný obsah, ak sa obrázok z nejakého dôvodu nezobrazil.
- Nastavte šírku obrázka ako „ 200 pixelov “.
- Potom '
Značka ” sa používa na pridanie popisku k obrázku. Okrem toho pridajte nadpis medzi značky „ “:
= 'TSL.png' všetko = 'Tvorcovia obsahu TSL' šírka = '200' >
Môžete vidieť, že sa zobrazil obrázok so zadaným popisom:
Teraz prejdite na druhú metódu pridania titulku pomocou CSS.
Metóda 2: Ako pridať popis obrázka pomocou prvku „
“?Ak chcete pridať popis obrázka pomocou „
“, vyskúšajte uvedené pokyny:
- Vytvor ' ” kontajner a pridajte atribút triedy s názvom “ držiak obrazu “.
- Pridať značku nadpisu “ ” pre vloženie nadpisu a štýl nadpisu podľa vlastného výberu.
- Pridajte ďalší prvok „
“ a vložte „„označiť spolu s „ src “, “ všetko “ a „ šírka ” medzi kontajnerom div.
- Pridajte tretiu „
“ s názvom triedy „ img-caption “. Potom vložte popis medzi značky „“. Navyše, „
” prvok sa používa na pridanie jedného zlomu riadku:= 'držiak obrazu' >
= 'color:rgb(95, 31, 245)' > HTML obrázok >
= 'TSL.png' všetko = 'Tvorcovia obsahu TSL' šírka = '200' >
= 'img-caption' >
>
>Je možné pozorovať, že titulok k obrázku bol úspešne pridaný:
Teraz prejdime k sekcii CSS na použitie vlastností.
Štýl „.image-holder“ v CSS
Najprv prejdite na „
'prvok s triedou' .držiak obrazu “. Potom použite nasledujúce vlastnosti CSS: .držiak obrazu {
pozíciu : príbuzný ;
výška : 100 pixelov ;
šírka : 200 pixelov ;
marža : auto ;
}Podrobnosti o vyššie uvedených vlastnostiach sú opísané nižšie:
- ' pozíciu “ je nastavený ako “ príbuzný ” na určenie pôvodnej polohy prvku, ktorá zostane v toku dokumentu, rovnako ako statická hodnota.
- Potom, “ výška ” sa používa na definovanie výšky prvku.
- ' šírka vlastnosť určuje veľkosť prvku na šírku.
- ' marža “ je nastavený ako “ auto ” na automatické nastavenie priestoru okolo prvku.
Popis štýlu v CSS
V tomto kroku pristúpime k dvom triedam s názvom „ držiak obrazu “ a „ img-caption “ a použite nasledujúce vlastnosti CSS:
.držiak obrazu .img-caption {
pozíciu : absolútne ;
zarovnanie textu : centrum ;
font-weight : tučný ;
šírka : 200 pixelov ;
výška : 50 pixelov ;
vľavo : 0px ;
farba : #f80909 ;
pozadie : rgb ( 140 , 166 , 253 ) ;
}Popis vyššie uvedených vlastností je nasledujúci:
- ' zarovnanie textu vlastnosť je nastavená ako centrum ” na zarovnanie polohy textu na stred.
- Ďalšie, ' font-weight “ je pridelený ako „ tučný ” pre nastavenie písma titulkov obrázka.
- Potom ' farba Vlastnosť ” sa používa na nastavenie farby prvku, ku ktorému sa pristupuje.
- ' pozadie Vlastnosť ” nastavuje farbu pozadia prvku.
- Ďalšie vlastnosti, vrátane „ pozíciu “, “ výška “ a „ šírka “ sa používajú aj na použitie príslušných funkcií.
Výkon
Diskutovali sme o metódach písania titulku pod obrázkom.
Záver
Ak chcete napísať popis pod obrázok, používatelia môžu použiť buď „
„prvok alebo jednoduchý“ “ kontajner. Ak chcete použiť „“, najprv pridajte „ ” prvok na vloženie obrázka do “
“, potom použite prvok „ “ a pridajte medzi jeho značky popis. V druhom prístupe môžu používatelia jednoducho použiť „ ” a použiť rôzne vlastnosti CSS na skrášlenie titulku. Tento príspevok demonštroval metódy písania titulku pod obrázkom.
- Najprv pridajte „