Miten luoda: kuvan tekstiblokkia

Edellinen sivu Kuvateksti
Seuraava sivu Läpinäkyvä kuvateksti

Opi, kuinka sijoittaa tekstiblokkia kuvan päälle.

Kuvan tekstiblokkia

Wuhan

Mikä hieno kaupunki! Rakastan sitä!

Kokeile itse

Kuinka sijoittaa tekstiblokkia kuvan yhteyteen

Ensimmäinen vaihe - Lisää HTML:

<div class="container">
  <img src="nature.jpg" alt="Norja" style="width:100%;">
  <div class="text-block">
    <h4>Wuhan</h4>
    <p>Mikä hieno kaupunki! Rakastan sitä!</p>
  </div>
</div>

Toinen vaihe - Lisää CSS:

/* Kuva- ja teksti容器的包含 */
.container {
  position: relative;
}
/* Oikea alakulma teksti */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

Kokeile itse