Pada kode di atas, kita telah membuat elemen div dan menyarangkan gambar dan elemen div lainnya. Div pertama, seperti yang telah disebutkan, menyimpan image dan div lainnya. Sedangkan wadah div kedua menampung posisi dan gaya teks yang akan ditempatkan pada gambar
Keluaran
Gambar telah disisipkan di halaman web
Pojok kiri atas
Posisi pertama teks yang akan kita atur adalah pojok kiri atas gambar. Gunakan potongan kode berikut
CSS
. img-container {
posisi. kerabat;
lebar. 400 piksel;
}
. gambar {
lebar. 100%
}
. kiri atas {
posisi. mutlak;
ukuran font. 20 piksel;
berat font. tebal;
gaya font. miring;
warna. putih;
atas. 15 piksel;
kiri. 30 piksel;
}
Posisi elemen div pertama telah diatur ke relatif sehingga kita benar-benar dapat memposisikan elemen div kedua. Teks yang akan ditempatkan pada gambar telah diberi beberapa ukuran, berat, gaya, dan warna, sedangkan untuk menempatkannya di pojok kiri atas kita telah menggunakan properti top dan left
Keluaran
Teks berhasil ditempatkan di sudut kiri atas
Pojok kiri bawah
Untuk tujuan menambahkan teks di pojok kiri bawah gambar, gunakan kode yang disebutkan di bawah ini
CSS
. div {
posisi. kerabat;
lebar. 400 piksel;
}
. gambar {
lebar. 100%
}
. kiri bawah {
posisi. mutlak;
ukuran font. 20 piksel;
berat font. tebal;
gaya font. miring;
warna. putih;
bawah. 3%;
kiri. 8%;
}
Sisa kodenya sama, namun untuk memposisikan teks di pojok kiri bawah kita telah mengatur properti bottom menjadi 3%, dan properti left menjadi 8%. Anda dapat mengubah nilai properti ini untuk memahami cara kerjanya
Keluaran
Teks diposisikan di sudut kiri bawah dengan sangat mudah
Tengah
Demikian pula, untuk menempatkan teks Anda di posisi tengah, pertimbangkan contoh yang disebutkan di bawah ini
CSS
. div {
posisi. kerabat;
lebar. 400 piksel;
}
. gambar {
lebar. 100%
}
. tengah {
posisi. mutlak;
ukuran font. 20 piksel;
berat font. tebal;
gaya font. miring;
warna. putih;
atas. 40%;
kiri. 40%;
}
Untuk menyesuaikan teks pada posisi tengah gambar, kami telah mengatur properti atas dan properti kiri menjadi 40%
Keluaran
Kami telah berhasil menempatkan teks di tengah gambar
Ujung kanan atas
Lihat kode di bawah ini untuk memahami cara menempatkan teks di pojok kanan atas gambar
CSS
. div {
posisi. kerabat;
lebar. 400 piksel;
}
. gambar {
lebar. 100%
}
. kanan atas {
posisi. mutlak;
atas. 2%;
benar. 10%;
ukuran font. 20 piksel;
berat font. tebal;
gaya font. miring;
warna. putih;
}
Apa yang telah kita lakukan untuk menempatkan teks di pojok kanan atas adalah kita telah mengatur properti atas menjadi 2%, dan properti kanan menjadi 10%. Ini bukan aturan yang keras dan cepat, oleh karena itu, Anda dapat mengubah nilai-nilai ini sesuai keinginan Anda
Keluaran
Teks disisipkan di sudut kanan atas gambar
Pojok kanan bawah
Posisi terakhir yang akan kita tunjukkan adalah pojok kanan bawah gambar. Ikuti kode di bawah ini
CSS
. div {
posisi. kerabat;
lebar. 400 piksel;
}
. gambar {
lebar. 100%
}
. kanan bawah {
posisi. mutlak;
bawah. 5%;
benar. 10%;
ukuran font. 20 piksel;
berat font. tebal;
gaya font. miring;
warna. putih;
}
Seperti yang Anda lihat, sisa kodenya sama seperti pada contoh sebelumnya dengan hanya perbedaan bahwa untuk menempatkan teks di pojok kanan bawah kita telah menggunakan properti bawah dan properti kanan
Keluaran
Teks ditempatkan di sudut kanan bawah
Kesimpulan
Untuk memposisikan teks Anda di atas gambar, tempatkan gambar dan teks Anda di dalam wadah div dan posisikan teks sepenuhnya, sementara itu berikan posisi relatif pada div. Posisi berbeda tempat Anda dapat menempatkan teks di atas gambar adalah pojok kiri atas, pojok kiri bawah, tengah, pojok kanan atas, dan pojok kanan bawah. Tugas ini dapat dilakukan dengan menggunakan berbagai properti CSS. Dalam posting ini kami telah mendemonstrasikan masing-masing posisi ini bersama dengan contoh yang sesuai