Sådan oprettes: Placer tekst på billedet

Lær, hvordan du placerer tekst på et billede.

Sådan placerer du tekst i et billede

Andet trin - Tilføj HTML:

<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Nederste venstre</div>
  <div class="top-left">Øverste venstre</div>
  <div class="top-right">Øverste højre</div>
  <div class="bottom-right">Nederste højre</div>
  <div class="centered">Centreret</div>
</div>

Første trin - Tilføj CSS:

/* Container, der indeholder billede og tekst */
.container {
  position: relative;
  text-align: center;
  color: white;
}
/* Tekst i nederste venstre hjørne */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}
/* Tekst i øverste venstre hjørne */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}
/* Tekst i øverste højre hjørne */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
/* Tekst i nederste højre hjørne */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
/* Centreret tekst */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Prøv det selv

Relaterede sider

Tilpasning:CSS bilde

Tilpasning:CSS posisjon