See postitus selgitab pildi alla pealdise kirjutamist.
Kuidas kirjutada pildi alla pealdis?
Pildi alla pealdise kirjutamiseks pakume erinevaid allpool nimetatud meetodeid:
- 1. meetod: kuidas lisada pildi pealdisi HTML-i abil
”Element? - 2. meetod: kuidas lisada pildi pealdisi kasutades ' ”Element?
1. meetod: kuidas lisada pildi pealdisi, kasutades HTML-i '
' elementi? Pildi pealkirja lisamiseks järgige järgmisi juhiseid.
- Esmalt lisage '
” element, mida kasutatakse iseseisva sisu esitamiseks, potentsiaalselt koos valikulise pealdisega. - Järgmisena sisestage '
' märgend lõigu sees ' ” silti. Lisage pilt, kasutades ' src ” atribuut. ' kõike ” atribuut näitab lisatud sisu, kui pilti mingil põhjusel ei kuvata.
- Määra pildi laiuseks ' 200 pikslit ”.
- Siis '
” märgendit kasutatakse pildi pealkirja lisamiseks. Lisaks lisage pealdis „ ” siltide vahele:
= 'TSL.png' kõike = 'TSL-i sisuloojad' laius = '200' >
>Näete, et määratud pealkirjaga pilt on kuvatud:
Nüüd liikuge CSS-i abil pealdise lisamise teise meetodi poole.
2. meetod: kuidas lisada pildi pealdisi, kasutades elementi „
”?Pildi pealkirja lisamiseks kasutades nuppu '
” element, proovige antud juhiseid:
- Loo ' ' konteiner ja lisage klassi atribuut nimega ' pildihoidja ”.
- Lisa pealkirja silt ' ” pealkirja sisestamiseks ja kujundage pealkiri vastavalt oma valikule.
- Lisage veel üks element '
' ja sisestage '' silt koos ' src ”, “ kõike ” ja „ laius ” atribuudid div konteineri vahel.
- Lisa kolmas '
' klassi nimega ' img-pealkiri ”. Seejärel lisage märgendite „” vahele pealdis. Veelgi enam, '
” elementi kasutatakse ühe reavahetuse lisamiseks:= 'pildihoidja' >
= 'värv:rgb(95, 31, 245)' > HTML-pilt >
= 'TSL.png' kõike = 'TSL-i sisuloojad' laius = '200' >
= 'img-pealkiri' >
>
>Võib täheldada, et pildi pealdis on edukalt lisatud:
Liigume nüüd CSS-i jaotise juurde atribuutide rakendamiseks.
Stiil '.image-holder' CSS-is
Esmalt avage '
' element, millel on klass ' .pildihoidja ”. Seejärel rakendage järgmisi CSS-i atribuute: .pildihoidja {
positsiooni : sugulane ;
kõrgus : 100 pikslit ;
laius : 200 pikslit ;
marginaal : auto ;
}Ülalmainitud omaduste üksikasju kirjeldatakse allpool:
- ' positsiooni ' on seatud kui ' sugulane ”, et määrata elemendi algne asukoht, mis jääb dokumendi voosse, täpselt nagu staatiline väärtus.
- Siis, ' kõrgus ” kasutatakse elemendi kõrguse määratlemiseks.
- ' laius ” atribuut määrab elemendi suuruse laiuses.
- ' marginaal ' on seatud kui ' auto ”, et elemendi ümber ruumi automaatselt määrata.
Stiili pealdis CSS-is
Selles etapis pääseme juurde kahele klassile nimega ' pildihoidja ” ja „ img-pealkiri ” ja rakendage järgmisi CSS-i atribuute:
.pildihoidja .img-pealkiri {
positsiooni : absoluutne ;
teksti joondamine : Keskus ;
font-weight : julge ;
laius : 200 pikslit ;
kõrgus : 50 pikslit ;
vasakule : 0 pikslit ;
värvi : #f80909 ;
taustal : rgb ( 140 , 166 , 253 ) ;
}Ülalnimetatud omaduste kirjeldus on järgmine:
- ' teksti joondamine ' atribuut on määratud kui ' Keskus ” teksti asukoha joondamiseks keskel.
- Järgmiseks ' font-weight ” on eraldatud kui „ julge ”, et määrata pildi pealdise font.
- Siis ' värvi ” atribuuti kasutatakse juurdepääsetava elemendi värvi määramiseks.
- ' taustal ” atribuut määrab elemendi tausta värvi.
- Muud omadused, sealhulgas ' positsiooni ”, “ kõrgus ”, ja „ laius ” kasutatakse ka vastavate funktsioonide rakendamiseks.
Väljund
Oleme arutanud pildi all oleva pealkirja kirjutamise meetodeid.
Järeldus
Pildi alla pealdise kirjutamiseks saavad kasutajad kasutada kas '
element või lihtne ” konteiner. „“ kasutamiseks lisage esmalt „ ' element, et manustada pilt '
” element, seejärel kasutage elementi „ ” ja lisage selle siltide vahele pealkiri. Teise lähenemisviisi korral saavad kasutajad lihtsalt kasutada ” elementi ja rakendage pealkirja kaunistamiseks erinevaid CSS-i atribuute. See postitus on näidanud, kuidas pildi alla pealkirja kirjutada.
- Esmalt lisage '