Ta objava pojasnjuje pisanje napisa pod sliko.
Kako napisati napis pod sliko?
Za pisanje napisa pod sliko bomo ponudili različne spodaj navedene metode:
- 1. način: Kako dodati napis slike s HTML-jem
»Element? - 2. način: Kako dodati napis slike z uporabo » »Element?
1. način: Kako dodati napis slike z elementom HTML “
”? Če želite dodati napis slike, upoštevajte ta navodila:
- Najprej dodajte »
”, ki se uporablja za predstavitev samostojne vsebine, potencialno z neobveznim napisom. - Nato vstavite »
»oznaka znotraj odstavka« ' oznaka. Dodajte sliko tako, da uporabite » src ” atribut. ' vse ” Lastnost prikazuje dodano vsebino, če se slika zaradi nekega razloga ni prikazala.
- Nastavite širino slike kot ' 200 slikovnih pik ”.
- Potem, '
” se uporablja za dodajanje napisa za sliko. Poleg tega dodajte napis med oznake “ ”:
= 'TSL.png' vse = 'Ustvarjalci vsebin TSL' premer = '200' >
Vidite lahko, da je prikazana slika z določenim napisom:
Zdaj se pomaknite proti drugi metodi za dodajanje napisa s pomočjo CSS.
2. način: Kako dodati napis slike z elementom “
”?Če želite dodati napis slike z uporabo »
”, poskusite podana navodila:
- Ustvariti ' « in dodajte atribut razreda z imenom » držalo za slike ”.
- Dodaj oznako naslova ' ” za vstavljanje naslova in slog naslova po vaši izbiri.
- Dodajte še en element »
« in vstavite »»označite skupaj z » src ”, “ vse « in » premer ” med vsebnikom div.
- Dodajte tretji “
” z imenom razreda “ img-napis ”. Nato vnesite napis med oznakama »«. Poleg tega je '
” se uporablja za dodajanje enega preloma vrstice:= 'držalo za slike' >
= 'barva:rgb(95, 31, 245)' > Slika HTML >
= 'TSL.png' vse = 'Ustvarjalci vsebin TSL' premer = '200' >
= 'img-napis' >
> Ustvarjalci vsebine TSL >
>
>Opazimo lahko, da je bil napis za sliko uspešno dodan:
Zdaj pa pojdimo proti razdelku CSS za uporabo lastnosti.
Slog '.image-holder' v CSS
Najprej odprite »
'element, ki ima razred' .nosilec slik ”. Nato uporabite naslednje lastnosti CSS: .nosilec slik {
položaj : relativno ;
višina : 100 slikovnih pik ;
premer : 200 slikovnih pik ;
marža : avto ;
}Podrobnosti zgoraj omenjenih lastnosti so opisane spodaj:
- ' položaj ' je nastavljeno kot ' relativno «, da določite prvotni položaj elementa, ki ostane v toku dokumenta, tako kot statična vrednost.
- Potem, ' višina ” se uporablja za določitev višine elementa.
- ' premer ” Lastnost podaja velikost elementa v širino.
- ' marža ' je nastavljeno kot ' avto ”, da samodejno nastavite prostor okoli elementa.
Napis sloga v CSS
V tem koraku bomo dostopali do dveh razredov z imenom ' držalo za slike « in » img-napis « in uporabite naslednje lastnosti CSS:
.nosilec slik .img-napis {
položaj : absolutno ;
poravnava besedila : center ;
teža pisave : krepko ;
premer : 200 slikovnih pik ;
višina : 50 slikovnih pik ;
levo : 0px ;
barva : #f80909 ;
ozadje : rgb ( 140 , 166 , 253 ) ;
}Opis zgoraj omenjenih lastnosti je naslednji:
- ' poravnava besedila Lastnost je nastavljena kot center ” za poravnavo položaja besedila na sredini.
- Naslednji, ' teža pisave ' je dodeljen kot ' krepko ”, da nastavite pisavo napisa slike.
- Potem, ' barva Lastnost se uporablja za nastavitev barve dostopanega elementa.
- ' ozadje Lastnost nastavi barvo ozadja elementa.
- Druge lastnosti, vključno z položaj ”, “ višina «, in » premer ” se uporabljajo tudi za uporabo ustreznih funkcij.
Izhod
Razpravljali smo o metodah za pisanje napisa pod sliko.
Zaključek
Za pisanje napisa pod sliko lahko uporabniki uporabijo »
'element ali preprost' ” posoda. Če želite uporabiti »«, najprej dodajte » ' za vdelavo slike v '
«, nato uporabite element » « in dodajte napis med njegove oznake. Pri drugem pristopu lahko uporabniki preprosto uporabijo » ” in uporabite različne lastnosti CSS, da polepšate napis. Ta objava je prikazala metode za pisanje napisa pod sliko.
- Najprej dodajte »