Šiame įraše paaiškinama, kaip parašyti antraštę po vaizdu.
Kaip parašyti antraštę po vaizdu?
Norėdami parašyti antraštę po vaizdu, pateiksime įvairius toliau nurodytus būdus:
- 1 būdas: kaip pridėti vaizdo antraštę naudojant HTML
'Elementas? - 2 būdas: kaip pridėti vaizdo antraštę naudojant „ 'Elementas?
1 būdas: kaip pridėti vaizdo antraštę naudojant HTML elementą „
“? Norėdami pridėti vaizdo antraštę, vadovaukitės šiomis instrukcijomis:
- Pirmiausia pridėkite „
“ elementą, kuris naudojamas savarankiškam turiniui vaizduoti, galbūt su pasirenkama antrašte. - Tada įterpkite „
'žyma pastraipos viduje' “ žymą. Pridėkite vaizdą naudodami ' src “ atributas. „ viskas “ ypatybė rodo pridėtą turinį, jei vaizdas nebuvo rodomas dėl kokios nors priežasties.
- Nustatykite vaizdo plotį kaip ' 200 piks “.
- Tada '
“ žyma naudojama vaizdo antraštei pridėti. Be to, pridėkite antraštę tarp „ “ žymų:
= 'TSL.png' viskas = „TSL turinio kūrėjai“ plotis = '200' >
>Matote, kad buvo parodytas vaizdas su nurodyta antrašte:
Dabar pereikite prie antrojo būdo pridėti antraštę naudojant CSS.
2 būdas: kaip pridėti vaizdo antraštę naudojant „
“ elementą?Norėdami pridėti vaizdo antraštę naudodami „
“ elementą, išbandykite pateiktas instrukcijas:
- Sukurti ' “ konteinerį ir pridėkite klasės atributą pavadinimu „ atvaizdo laikiklis “.
- Pridėti antraštės žymą ' “, kad įterptumėte antraštę, ir stilizuokite antraštę pagal savo pasirinkimą.
- Pridėkite kitą „
“ elementą ir įterpkite „“ žyma kartu su “ src “, „ viskas “ ir „ plotis “ atributai tarp „div“ konteinerio.
- Pridėkite trečią „
“ klasės pavadinimu „ img-antraštė “. Tada pateikite antraštę tarp žymų „“. Be to, „
“ elementas naudojamas vienai eilutės pertraukai pridėti:= 'vaizdo laikiklis' >
= 'spalva:rgb(95, 31, 245)' > HTML vaizdas >
= 'TSL.png' viskas = „TSL turinio kūrėjai“ plotis = '200' >
= 'img-antraštė' >
>
>Galima pastebėti, kad vaizdo antraštė buvo sėkmingai pridėta:
Dabar pereikime prie ypatybių taikymo CSS skyriaus.
Stilius „.image-holder“ CSS
Pirmiausia pasiekite „
'elementas, turintis klasę' .vaizdo laikiklis “. Tada pritaikykite šias CSS ypatybes: .vaizdo laikiklis {
padėtis : giminaitis ;
aukščio : 100 piks ;
plotis : 200 piks ;
marža : automatinis ;
}Išsami informacija apie aukščiau paminėtas savybes aprašyta toliau:
- „ padėtis “ yra nustatytas kaip “ giminaitis “, kad nurodytumėte pradinę elemento padėtį, kuri lieka dokumento sraute, kaip ir statinė vertė.
- Tada ' aukščio “ naudojamas elemento aukščiui apibrėžti.
- „ plotis ypatybė nurodo elemento dydį pločio.
- „ marža “ yra nustatytas kaip “ automatinis “, kad automatiškai nustatytumėte erdvę aplink elementą.
Stiliaus antraštė CSS
Šiame žingsnyje mes pasieksime dvi klases pavadinimu ' atvaizdo laikiklis “ ir „ img-antraštė “ ir pritaikykite šias CSS ypatybes:
.vaizdo laikiklis .img-antraštė {
padėtis : absoliutus ;
teksto lygiavimas : centras ;
šrifto svoris : drąsus ;
plotis : 200 piks ;
aukščio : 50 piks ;
paliko : 0px ;
spalva : #f80909 ;
fone : rgb ( 140 , 166 , 253 ) ;
}Aukščiau paminėtų savybių aprašymas yra toks:
- „ teksto lygiavimas 'ypatybė nustatyta kaip ' centras “, kad būtų suderinta teksto padėtis centre.
- Kitas, ' šrifto svoris “ yra paskirstytas kaip „ drąsus “, kad nustatytumėte vaizdo antraštės šriftą.
- Tada ' spalva “ ypatybė naudojama nustatant pasiekiamo elemento spalvą.
- „ fone “ ypatybė nustato elemento fono spalvą.
- Kitos savybės, įskaitant ' padėtis “, „ aukščio “ ir „ plotis “ taip pat naudojami atitinkamoms funkcijoms taikyti.
Išvestis
Aptarėme antraštės po vaizdu rašymo būdus.
Išvada
Norėdami parašyti antraštę po vaizdu, vartotojai gali naudoti „
elementas arba paprastas “ konteineris. Norėdami naudoti „“, pirmiausia pridėkite „ “ elementą, kad įterptumėte vaizdą į “
“, tada naudokite elementą „ “ ir pridėkite antraštę tarp jo žymų. Antruoju būdu vartotojai gali tiesiog naudoti „ “ elementą ir pritaikykite skirtingas CSS ypatybes, kad pagražintumėte antraštę. Šis įrašas parodė, kaip parašyti antraštę po vaizdu.
- Pirmiausia pridėkite „