Bagaimana membuat: blok teks di atas gambar

Belajar bagaimana menempatkan blok teks di atas gambar.

Blok teks gambar

Wuhan

Wuhan

Bandar yang hebat! Saya suka dia!

Cuba sendiri

Bagaimana menempatkan blok teks di gambar

Kesempatan pertama - Tambahkan HTML:

<div class="container">
  <img src="nature.jpg" alt="Norway" style="width:100%;">
  <div class="text-block">
    <h4>Wuhan</h4>
    <p>Bandar yang hebat! Saya suka dia!</p>
  </div>
</div>

Kesempatan kedua - Tambahkan CSS:

/* Pemegang gambar dan teks */
.container {
  position: relative;
}
/* Teks kanan bawah */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

Cuba sendiri

Halaman yang berkaitan

Maklumat:CSS 图像

Maklumat:CSS 定位