Această postare explică despre scrierea unei subtitrări sub o imagine.
Cum se scrie o legendă sub o imagine?
Pentru a scrie o legendă sub o imagine, vom oferi diferite metode menționate mai jos:
- Metoda 1: Cum să adăugați subtitrări de imagine folosind HTML „
' Element? - Metoda 2: Cum să adăugați subtitrări de imagine folosind „ ' Element?
Metoda 1: Cum să adăugați subtitrări de imagine folosind elementul HTML „
”? Pentru a adăuga o legendă a imaginii, urmați următoarele instrucțiuni:
- Mai întâi, adăugați „
” element, care este utilizat pentru a reprezenta conținut autonom, potențial cu o legendă opțională. - Apoi, introduceți un „
„etichetă în interiorul paragrafului „ ' etichetă. Adăugați imaginea utilizând „ src ” atribut. „ Tot ” proprietatea afișează conținutul adăugat dacă imaginea nu a fost afișată din anumite motive.
- Setați lățimea imaginii ca „ 200px ”.
- Apoi, „
” eticheta este folosită pentru a adăuga legenda pentru imagine. Mai mult, adăugați legenda între etichetele „ ”:
= „TSL.png” Tot = „Creatori de conținut TSL” lăţime = '200' >
Puteți vedea că imaginea cu legenda specificată a fost afișată:
Acum, treceți la a doua metodă de adăugare a legendei folosind CSS.
Metoda 2: Cum să adăugați subtitrări de imagine folosind elementul „
”?Pentru a adăuga legenda imaginii utilizând „
” element, încercați instrucțiunile date:
- Creeaza o ' ” container și adăugați un atribut de clasă cu numele „ suport de imagine ”.
- Adăugați eticheta de titlu „ ” pentru inserarea titlului și stilizarea titlului după alegerea dvs.
- Adăugați un alt element „
” și introduceți un „eticheta ” împreună cu ” src ”, “ Tot ' și ' lăţime ” atribute între containerul div.
- Adăugați un al treilea „
” cu numele clasei „ img-legendă ”. Apoi, introduceți legenda între etichetele „”. Mai mult decât atât, „
” elementul este folosit pentru a adăuga o întrerupere de linie:= 'deținător de imagine' >
= „culoare:rgb(95, 31, 245)” > Imagine HTML >
= „TSL.png” Tot = „Creatori de conținut TSL” lăţime = '200' >
= 'img-caption' >
>
>Se poate observa că legenda pentru imagine a fost adăugată cu succes:
Acum, să trecem la secțiunea CSS pentru aplicarea proprietăților.
Stil „.image-holder” în CSS
Mai întâi, accesați „
„element având o clasă „ .deţinător de imagine ”. Apoi, aplicați următoarele proprietăți CSS: .deţinător de imagine {
poziţie : relativ ;
înălţime : 100px ;
lăţime : 200px ;
marginea : auto ;
}Detaliile proprietăților menționate mai sus sunt descrise mai jos:
- „ poziţie ” este setat ca „ relativ ” pentru a specifica poziția inițială a unui element care rămâne în fluxul documentului, la fel ca valoarea statică.
- Apoi, ' înălţime ” este folosit pentru a defini înălțimea elementului.
- „ lăţime ” proprietate specifică dimensiunea elementului în lățime.
- „ marginea ” este setat ca „ auto ” pentru a seta automat spațiul în jurul elementului.
Stil de lege în CSS
În acest pas, vom accesa cele două clase cu numele „ suport de imagine ' și ' img-legendă ” și aplicați următoarele proprietăți CSS:
.deţinător de imagine .img-caption {
poziţie : absolut ;
aliniere text : centru ;
grosimea fontului : îndrăzneţ ;
lăţime : 200px ;
înălţime : 50px ;
stânga : 0px ;
culoare : #f80909 ;
fundal : rgb ( 140 , 166 , 253 ) ;
}Descrierea proprietăților menționate mai sus este următoarea:
- „ aliniere text ” proprietatea este setată ca “ centru ” pentru alinierea poziției textului în centru.
- Următorul, ' grosimea fontului ” este alocat ca „ îndrăzneţ ” pentru a seta fontul subtitrării imaginii.
- Apoi, „ culoare ” este utilizată pentru setarea culorii elementului accesat.
- „ fundal ” proprietatea setează culoarea fundalului elementului.
- Alte proprietăți, inclusiv „ poziţie ”, “ înălţime ', și ' lăţime ” sunt folosite și pentru aplicarea funcționalităților respective.
Ieșire
Am discutat despre metodele de scriere a legendei sub o imagine.
Concluzie
Pentru a scrie o legendă sub o imagine, utilizatorii pot folosi fie „
„element sau un simplu „ ” container. Pentru a utiliza „”, mai întâi, adăugați „ ” element pentru a încorpora imaginea în interiorul „
„, apoi, utilizați elementul „ ” și adăugați o legendă între etichetele sale. În a doua abordare, utilizatorii pot folosi pur și simplu „ ” și aplică diferite proprietăți CSS pentru a înfrumuseța legenda. Această postare a demonstrat metodele de scriere a legendei sub o imagine.
- Mai întâi, adăugați „