Bagaimanakah Saya Boleh Memaparkan Teks di Atas Imej pada Tuding Menggunakan Teks Sebenar?

Paparkan Teks pada Tuding Menggunakan Teks Nyata

Anda boleh memaparkan teks pada imej pada tuding menggunakan teks sebenar dan bukannya sprite imej. Begini caranya:

Balut imej dan perihalan yang anda mahu muncul pada tuding dalam div bekas. Div ini sepatutnya mempunyai dimensi yang sama seperti imej.

 <img  class="img__img" src="http://placehold.it/257x200.jpg" alt="Bagaimanakah Saya Boleh Memaparkan Teks di Atas Imej pada Tuding Menggunakan Teks Sebenar?" ><br> <p></p>

Tetapkan CSS berikut kepada div bekas (.img__wrap):

.img__wrap {
  position: relative;
  height: [Set to match image height];
  width: [Set to match image width];
}

Letakkan penerangan teks sepenuhnya dalam div kontena (.img__description).

.img__description {<br> kedudukan: mutlak;<br> atas: 0 ;<br> bawah: 0;<br> kiri: 0;<br> kanan: 0;<br> latar belakang: rgba(0, 0, 0, 0.7);<br> warna: #fff;<br> keterlihatan: tersembunyi;<br> kelegapan: 0;<br>}<pre class="brush:php;toolbar:false">

Make the text description visible and opaque on hover by adding the following CSS:

Dengan penyelesaian ini, keterangan teks anda akan muncul di atas imej apabila pengguna menuding tamat.

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