Bagaimana cara overlay teks pada gambar dalam html?

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

Bagaimana Anda melapisi teks pada gambar dalam HTML?

Bagaimana cara melapisi teks pada gambar?

Bagaimana cara meletakkan teks di sisi kanan gambar dalam HTML?

jpg” ALIGN=”kanan” />Teks ini mengalir di sebelah kiri. Anda bahkan dapat mengalirkan teks di sekitar gambar yang ditempatkan di sisi kiri halaman dan kemudian membuat teks membungkus gambar berbeda yang ditempatkan di sisi kanan. Dalam contoh ini, elemen break dan satu atributnya, Clear, mulai digunakan. jpg” ALIGN=”right” />This text flows on the left. You can even flow text around an image placed on the left side of the page and then make the text wrap around a different image placed on the right side. In this instance, the break element and its one attribute, Clear, come into use.