Dette indlæg forklarer, hvordan du skriver en billedtekst under et billede.
Hvordan skriver man en billedtekst under et billede?
For at skrive en billedtekst under et billede, vil vi give forskellige metoder nævnt nedenfor:
- Metode 1: Sådan tilføjes billedtekst ved hjælp af HTML '
'Element? - Metode 2: Sådan tilføjes billedtekst ved hjælp af ' 'Element?
Metode 1: Sådan tilføjes billedtekst ved hjælp af HTML-elementet '
'? For at tilføje en billedtekst skal du gennemgå følgende instruktioner:
- Først skal du tilføje '
”-element, som bruges til at repræsentere selvstændigt indhold, potentielt med en valgfri billedtekst. - Indsæt derefter en ' ' tag inde i afsnittet ' ” tag. Tilføj billedet ved at bruge ' src ' attribut. Det ' alt ” egenskab viser det tilføjede indhold, hvis billedet ikke blev vist af en eller anden grund.
- Indstil billedbredden som ' 200 px ”.
- Derefter '
” tag bruges til at tilføje billedteksten til billedet. Tilføj desuden billedteksten mellem ' ' tags:
> >
> = 'TSL.png' alt = 'TSL-indholdsskabere' bredde = '200' >
> TSL-indholdsskabere > >
Du kan se, at billedet med den angivne billedtekst er blevet vist:
Gå nu mod den anden metode til at tilføje billedteksten ved hjælp af CSS.
Metode 2: Sådan tilføjes billedtekst ved hjælp af '
'-elementet?For at tilføje billedteksten ved at bruge '
element, prøv de givne instruktioner:
- Lave en ' ' container og tilføj en klasseattribut med navnet ' billedholder ”.
- Tilføj overskrift tag ' ” for at indsætte overskriften og style overskriften efter dit valg.
- Tilføj endnu et '
'-element og indsæt et ' ' tag sammen med ' src ', ' alt ' og ' bredde ”-attributter mellem div-beholderen.- Tilføj en tredje '
' med klassenavnet ' img-billedtekst ”. Angiv derefter billedteksten mellem ''-tags. Desuden er '
' element bruges til at tilføje et linjeskift:= 'billedholder' >>
= 'color:rgb(95, 31, 245)' > HTML-billede
>
>>
= 'TSL.png' alt = 'TSL-indholdsskabere' bredde = '200' >
= 'img-billedtekst' >>
> TSL-indholdsskabere
Det kan ses, at billedteksten til billedet er blevet tilføjet med succes:
Lad os nu gå til CSS-sektionen for at anvende egenskaberne.
Stil '.image-holder' i CSS
Først skal du få adgang til '
' element med en klasse ' .image-holder ”. Anvend derefter følgende CSS-egenskaber: .image-holder {
position : i forhold ;
højde : 100 px ;
bredde : 200 px ;
margen : auto ;
}Detaljerne for ovennævnte egenskaber er beskrevet nedenfor:
- Det ' position ' er sat som ' i forhold ” for at angive et elements oprindelige position, der forbliver i dokumentets flow, ligesom den statiske værdi.
- Derefter, ' højde ” bruges til at definere elementhøjden.
- Det ' bredde ” egenskab angiver størrelsen af elementet i bredden.
- Det ' margen ' er sat som ' auto ” for at indstille mellemrummet automatisk omkring elementet.
Style Caption i CSS
I dette trin får vi adgang til de to klasser med navnet ' billedholder ' og ' img-billedtekst ' og anvend følgende CSS-egenskaber:
.image-holder .img-billedtekst {
position : absolut ;
tekstjustering : centrum ;
skrifttype-vægt : fremhævet ;
bredde : 200 px ;
højde : 50 px ;
venstre : 0px ;
farve : #f80909 ;
baggrund : rgb ( 140 , 166 , 253 ) ;
}Beskrivelsen af de ovennævnte egenskaber er som følger:
- Det ' tekstjustering ' egenskab er indstillet som ' centrum ” for at justere tekstpositionen i midten.
- Næste, ' skrifttype-vægt ' er tildelt som ' fremhævet ” for at indstille billedtekstskrifttypen.
- Derefter ' farve egenskaben bruges til at indstille farven på det tilgåede element.
- Det ' baggrund ” egenskab indstiller farven på elementets baggrund.
- Andre ejendomme, herunder ' position ', ' højde ', og ' bredde ” bruges også til at anvende de respektive funktionaliteter.
Produktion
Vi har diskuteret metoderne til at skrive billedteksten under et billede.
Konklusion
For at skrive en billedtekst under et billede kan brugere enten bruge '
' element eller et simpelt ' ' container. For at bruge '' skal du først tilføje ' '-element for at integrere billedet i ' '-elementet, så brug elementet ' ' og tilføj en billedtekst mellem dets tags. I den anden tilgang kan brugerne blot bruge ' ” element og anvende forskellige CSS-egenskaber for at forskønne billedteksten. Dette indlæg har demonstreret metoderne til at skrive billedteksten under et billede.
- Først skal du tilføje '