Bagaimanakah Saya Boleh Memaparkan Teks di Atas Imej pada Tuding Menggunakan Teks Sebenar?-tutorial css-php.cn

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

Patricia Arquette

Lepaskan： 2024-12-12 16:37:10

asal

306 orang telah melayarinya

How Can I Display Text Over an Image on Hover Using Real Text?

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" /><br> <p></div>

Tetapkan CSS berikut kepada div bekas (.img__wrap):

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

Salin selepas log masuk

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>}</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></div>
</div>

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

<div>

Salin selepas log masuk

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!