Bagaimana untuk menambah teks pada gambar dalam html

WBOY
Lepaskan: 2021-11-09 16:15:08
asal
67010 orang telah melayarinya

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.

Bagaimana untuk menambah teks pada gambar dalam html

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.

Bagaimana untuk menambah teks pada gambar dalam html

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

Bagaimana untuk menambah teks pada gambar dalam html

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

Bagaimana untuk menambah teks pada gambar dalam html

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.

Bagaimana untuk menambah teks pada gambar dalam html

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

Bagaimana untuk menambah teks pada gambar dalam html

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.

Bagaimana untuk menambah teks pada gambar dalam html

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

Bagaimana untuk menambah teks pada gambar dalam html

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan