Hvordan skriver man en billedtekst under et billede? – CSS

Hvordan Skriver Man En Billedtekst Under Et Billede Css



I HTML/CSS kan brugere tilføje forskellige billeder og logoer, mens de opretter websider. Desuden giver det brugerne mulighed for at tilføje en billedtekst til billedet og logge på forskellige former. For eksempel kan brugere tilføje billedteksten under billedet, øverst, dets venstre eller højre. Til dette formål er '
”-elementet benyttes.

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-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.