Hur man skapar: Placera text på bilden

Lär dig hur du lägger text på en bild.

Hur man placerar text på en bild

Steg 1 - Lägg till HTML:

<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Nederkant Vänster</div>
  <div class="top-left">Övre Vänster</div>
  <div class="top-right">Övre Höger</div>
  <div class="bottom-right">Nederkant Höger</div>
  <div class="centered">Centrerad</div>
</div>

Steg 2 - Lägg till CSS:

/* Kontainer som innehåller bild och text */
.container {
  position: relative;
  text-align: center;
  color: white;
}
/* Text i nederkant vänster */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}
/* Text i övre vänster */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}
/* Text i övre höger */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
/* Text i nederkant höger */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
/* Centrerad text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Prova själv

Relaterade sidor

Lär dig:CSS bild

Lär dig:CSS positionering