Bagaimana untuk menambah teks pada gambar dalam html

Kaedah menambah: 1. Gunakan atribut kedudukan untuk menambah gaya kedudukan relatif pada div elemen kontena yang mengandungi gambar dan teks 2. Gunakan atribut kedudukan untuk menambah gaya kedudukan mutlak pada elemen teks; Gunakan atribut kiri dan atas untuk menetapkan teks Kedudukan elemen pada gambar, hanya letakkan teks pada gambar.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara menambah teks pada imej html:

1 Cipta fail html baharu, bernama test.html, untuk Explain bagaimana untuk menambah teks pada imej menggunakan html css.

2. Dalam fail test.html, gunakan teg div untuk mencipta modul, dan dalam div, gunakan teg img untuk mencipta imej.

3. Dalam fail test.html, dalam teg div, gunakan tag p untuk mencipta sekeping teks Seterusnya, teks akan ditambahkan pada imej melalui css.

4 Dalam fail test.html, dalam teg css, gunakan "*" untuk memulakan margin dalam dan luar semua elemen pada halaman kepada 0 untuk mengelakkan mempengaruhi takrif gaya css berikut.

5 Dalam teg css, tetapkan gaya elemen div dan takrifkan atribut kedudukannya sebagai kedudukan relatif (relatif).

6 Dalam teg css, tetapkan gaya elemen p dalam div, dan tentukan kedudukan atribut kedudukannya sebagai kedudukan mutlak (mutlak). relatif kepada Ia bergantung pada kedudukan imej Biarkan teks 10px dari tepi kiri imej dan 10px dari tepi atas imej, dan tetapkan warna teks kepada merah.

7. Buka fail test.html dalam penyemak imbas untuk menyemak kesannya.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk menambah teks pada gambar dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!