Hoe plaats ik tekst over afbeeldingen in html?

Hoe tekst over afbeeldingen in HTML te plaatsen. Telkens als ik de onderstaande code invoer, gaat de tekst onder de afbeelding.

<img src="example.jpg">Text</img>

Antwoord 1, autoriteit 100%

Je kunt een div maken met exact dezelfde grootte als de afbeelding.

<div class="imageContainer">Some Text</div>

gebruik de CSS background-image eigenschap om de afbeelding weer te geven

.imageContainer {
       width:200px; 
       height:200px; 
       background-image: url(locationoftheimage);
 }

meer hier

opmerking: dit knoeit enigszins met de semantiek van uw document. Gebruik indien nodig javascript om de div in de plaats van een echte afbeelding te injecteren.

Antwoord 2, autoriteit 87%

Je moet absoluut gepositioneerde CSS gebruiken over een relatief gepositioneerde img-tag. Het artikel Text Blocks Over Imagegeeft een stapsgewijs voorbeeld voor het plaatsen tekst over een afbeelding.

Antwoord 3, autoriteit 61%

De <img>element is leeg het heeft geen eindtag.

Als de afbeelding een achtergrondafbeelding is, gebruik dan CSS. Als het een inhoudsafbeelding is, stel dan position: relativein op een container en vervolgens positioneerde afbeelding en/of tekst er absoluut in.

Antwoord 4, autoriteit 52%

Je kunt dit proberen…

<div class="image">
      <img src="" alt="" />
      <h2>Text you want to display over the image</h2>
</div>

CSS

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}
h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

Antwoord 5, autoriteit 13%

Het gebruik van absoluteals positionis niet responsive + mobielvriendelijk. Ik raad aan om een ​​divte gebruiken met een background-imageen dan tekst in de divte plaatsen om tekst over de afbeelding te plaatsen. Afhankelijk van uw html, moet u mogelijk heightgebruiken met vhwaarde