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 Show Keluaran Gambar telah disisipkan di halaman web Pojok kiri atasPosisi pertama teks yang akan kita atur adalah pojok kiri atas gambar. Gunakan potongan kode berikut CSS. img-container { 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 bawahUntuk tujuan menambahkan teks di pojok kiri bawah gambar, gunakan kode yang disebutkan di bawah ini CSS. div { 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 TengahDemikian pula, untuk menempatkan teks Anda di posisi tengah, pertimbangkan contoh yang disebutkan di bawah ini CSS. div { 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 atasLihat kode di bawah ini untuk memahami cara menempatkan teks di pojok kanan atas gambar CSS. div { 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 bawahPosisi terakhir yang akan kita tunjukkan adalah pojok kanan bawah gambar. Ikuti kode di bawah ini CSS. div { 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 KesimpulanUntuk 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 cara meletakkan gambar di atas teks di CSS?Hal ini dapat dilakukan dengan menutup gambar dan teks dalam "div" HTML. Kemudian jadikan posisi div “relative” dan posisi teks “absolute” . Elemen absolut diposisikan relatif terhadap induknya (div).
Bagaimana Anda melapisi gambar pada teks?Dalam file Anda, pastikan Anda telah menyisipkan foto. Pada tab Sisipkan, di grup Teks, klik Kotak Teks, seret untuk menggambar kotak teks di dekat gambar, lalu ketikkan teks Anda .
Bagaimana cara memposisikan gambar di CSS?Anda dapat memosisikan gambar dengan mudah dengan menggunakan properti object-position . Anda juga bisa menggunakan banyak cara lain seperti float-property yang akan dibahas lebih lanjut di artikel ini. Metode. properti posisi objek. Tentukan bagaimana elemen gambar diposisikan dengan koordinat x, y di dalam kotak kontennya.
Bagaimana cara menempatkan teks dan gambar berdampingan di CSS?Begini caranya. Di HTML Anda, buat elemen penampung untuk teks dan gambar Anda. Misalnya, Anda dapat membuat sarang |