Bagaimanakah Saya Boleh Memaparkan Teks Pada Imej pada Tuding Hanya Menggunakan HTML dan CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Memaparkan Teks Pada Imej pada Tuding Hanya Menggunakan HTML dan CSS?

Barbara Streisand

Lepaskan： 2024-12-05 07:22:14

asal

738 orang telah melayarinya

How Can I Display Text Over an Image on Hover Using Only HTML and CSS?

Memaparkan Teks pada Tuding Menggunakan HTML dan CSS

Dalam reka bentuk web, menambah teks deskriptif yang muncul apabila pengguna menuding pada imej meningkatkan pengalaman pengguna. Teks ini memberikan maklumat berharga tentang imej, mencipta pengalaman penyemakan imbas yang interaktif dan menarik.

Mencapai kesan ini hanya menggunakan HTML dan CSS adalah agak mudah. Begini cara anda boleh melakukannya langkah demi langkah:

Balut imej dan teks tuding dalam div bekas:
Buat div di sekeliling kedua-dua imej dan teks yang akan muncul pada tuding. Div ini sepatutnya mempunyai ketinggian dan lebar yang sama dengan imej.
Letakkan teks tuding secara mutlak dalam div bekas:
Menggunakan CSS, letakkan teks tuding secara mutlak dalam div bekas . Tetapkan kedudukannya kepada mutlak, dengan atas, bawah, kiri dan kanan ditetapkan kepada 0 untuk menjajarkan dengan betul dalam imej. Pada mulanya, tetapkan keterlihatannya kepada tersembunyi dan kelegapan kepada 0.
Laraskan kesan tuding:
Akhir sekali, gunakan kesan tuding pada div bekas untuk mendedahkan teks tuding. Apabila pengguna menuding pada imej, teks tuding akan menjadi kelihatan dan legap sepenuhnya dengan menetapkan keterlihatannya kepada kelihatan dan kelegapan kepada 1.

 tetapan semula pantas </em>/</p><ul><li>{<br>margin: 0;<br>padding: 0;<br>sempadan: 0;<br>}</li></ul><p>/<em> gaya yang relevan </em>/<br>.img__wrap {<br> kedudukan: relatif;<br> tinggi: 200px;<br> lebar: 257px;<br>}</p><p>.img__description {<br> kedudukan: mutlak;<br> atas: 0;<br> bawah: 0;<br> kiri: 0;<br> kanan: 0;<br> latar belakang: rgba(29, 106, 154, 0.72);<br> warna: #fff;<br> keterlihatan: tersembunyi;<br> kelegapan: 0;</p><p>/<em> kesan peralihan. tidak perlu </em>/<br> peralihan: kelegapan .2s, kebolehlihatan .2s;<br>}</p><p>.img__wrap:hover .img__description {<br> kebolehlihatan: boleh dilihat;<br> kelegapan: 1;<br>}

 <img class="img__img" src="http://placehold.it/257x200.jpg" /><br> <p></div>

Pendekatan ini menindih teks penerangan dengan berkesan pada imej, memaparkan teks apabila pengguna menuding ke atas imej tanpa memerlukan penggunaan sprite imej.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Teks Pada Imej pada Tuding Hanya Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!