Cara - Posisikan Teks Di Atas Gambar
Pelajari cara menempatkan teks di atas gambar.
Teks Gambar
Kiri bawah
Kiri Atas
Kanan atas
Kanan bawah
terpusat
Cara Menempatkan Teks di Gambar
Langkah 1) Tambahkan HTML:
Contoh
<div class="container">
<img src="img_snow_wide.jpg" alt="Snow"
style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top
Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>
Langkah 2) Tambahkan CSS:
Contoh
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom
left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position:
absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text
*/
.centered {
position:
absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Untuk mempelajari lebih lanjut tentang cara menata gambar, baca tutorial Gambar CSS kami.
Untuk mempelajari lebih lanjut tentang penentuan posisi CSS, baca tutorial Posisi CSS kami.