Ovaj post objašnjava pisanje naslova ispod slike.
Kako napisati natpis ispod slike?
Da biste napisali naslov ispod slike, pružit ćemo različite metode navedene u nastavku:
- Metoda 1: Kako dodati opis slike pomoću HTML-a “
” Element? - Metoda 2: Kako dodati opis slike pomoću ' ” Element?
Metoda 1: Kako dodati opis slike koristeći HTML “
” element? Da biste dodali opis slike, prođite kroz sljedeće upute:
- Prvo dodajte '
”, koji se koristi za predstavljanje samostalnog sadržaja, potencijalno s neobaveznim naslovom. - Zatim umetnite '
” oznaka unutar odlomka “ ” oznaka. Dodajte sliku koristeći ' src ” atribut. ' sve ” Svojstvo prikazuje dodani sadržaj ako se slika nije prikazala iz nekog razloga.
- Postavite širinu slike kao ' 200 px ”.
- Onda '
” oznaka se koristi za dodavanje naslova za sliku. Štoviše, dodajte naslov između oznaka “ ”:
= 'TSL.png' sve = 'TSL kreatori sadržaja' širina = '200' >
>Možete vidjeti da je prikazana slika s navedenim naslovom:
Sada prijeđite na drugu metodu za dodavanje naslova pomoću CSS-a.
Metoda 2: Kako dodati naslov slike pomoću elementa “
”?Za dodavanje naslova slike pomoću '
”, isprobajte dane upute:
- Stvoriti ' ' i dodajte atribut klase s imenom ' držač slika ”.
- Dodajte oznaku naslova ' ” za umetanje naslova i stilizirajte naslov prema svom izboru.
- Dodajte još jedan element “
” i umetnite “” označite zajedno s “ src ”, “ sve ' i ' širina ” između div spremnika.
- Dodajte treći “
” s nazivom klase “ img-natpis ”. Zatim unesite naslov između oznaka “”. Štoviše, '
” element se koristi za dodavanje jednog prijeloma retka:= 'držač slike' >
= 'boja:rgb(95, 31, 245)' > HTML slika >
= 'TSL.png' sve = 'TSL kreatori sadržaja' širina = '200' >
= 'img-natpis' >
>
>Može se primijetiti da je naslov za sliku uspješno dodan:
Sada idemo prema odjeljku CSS za primjenu svojstava.
Stil “.image-holder” u CSS-u
Najprije pristupite '
'element koji ima klasu' .držač slike ”. Zatim primijenite sljedeća CSS svojstva: .držač slike {
položaj : relativna ;
visina : 100 px ;
širina : 200 px ;
margina : auto ;
}Pojedinosti gore navedenih svojstava opisane su u nastavku:
- ' položaj ' postavljeno je kao ' relativna ” za određivanje izvornog položaja elementa koji ostaje u toku dokumenta, baš kao i statička vrijednost.
- Zatim, ' visina ” se koristi za definiranje visine elementa.
- ' širina ” Svojstvo određuje veličinu elementa u širini.
- ' margina ' postavljeno je kao ' auto ” za automatsko postavljanje prostora oko elementa.
Opis stila u CSS-u
U ovom koraku pristupit ćemo dvjema klasama s nazivom ' držač slika ' i ' img-natpis ” i primijenite sljedeća CSS svojstva:
.držač slike .img-natpis {
položaj : apsolutni ;
poravnanje teksta : centar ;
težina fonta : podebljano ;
širina : 200 px ;
visina : 50 px ;
lijevo : 0px ;
boja : #f80909 ;
pozadina : rgb ( 140 , 166 , 253 ) ;
}Opis gore navedenih svojstava je sljedeći:
- ' poravnanje teksta ” svojstvo je postavljeno kao “ centar ” za poravnavanje položaja teksta u sredini.
- Sljedeći, ' težina fonta ” dodjeljuje se kao “ podebljano ” za postavljanje fonta naslova slike.
- Onda ' boja ” Svojstvo se koristi za postavljanje boje elementa kojem se pristupa.
- ' pozadina ” Svojstvo postavlja boju pozadine elementa.
- Ostala svojstva, uključujući ' položaj ”, “ visina ', i ' širina ” također se koriste za primjenu odgovarajućih funkcionalnosti.
Izlaz
Razgovarali smo o metodama pisanja naslova ispod slike.
Zaključak
Da biste napisali naslov ispod slike, korisnici mogu koristiti '
'element ili jednostavan' ” spremnik. Da biste koristili “”, prvo dodajte “ ' za ugradnju slike unutar '
”, zatim upotrijebite element “ ” i dodajte naslov između njegovih oznaka. U drugom pristupu, korisnici mogu jednostavno koristiti ' ” i primijenite različita CSS svojstva za uljepšavanje naslova. Ovaj post je pokazao metode za pisanje naslova ispod slike.
- Prvo dodajte '