Bagaimana untuk Membenamkan Imej ke dalam Div Menggunakan Harta Kandungan CSS?

Memasukkan Imej ke dalam Div Menggunakan CSS

Ramai pengguna mencari penyelesaian untuk memaparkan imej dalam div gaya CSS sambil membenarkan div menyesuaikan diri dengan dimensi imej. Artikel ini menangani isu ini dan menyediakan kaedah yang cekap untuk mereplikasi kefungsian elemen HTML

Teknik yang dicadangkan melibatkan penggunaan sifat kandungan dalam CSS untuk memasukkan imej yang dikehendaki ke dalam div. Begini caranya:

1. Buat elemen div dengan kelas yang ditetapkan, contohnya:

   <code class="html"><div class="image"></div></code>

   Salin selepas log masuk

2. Dalam CSS, gunakan gaya mengikut kelas:

   <code class="css">div.image::before {
   content:url(http://placehold.it/350x150);
   }</code>

   Salin selepas log masuk

Dalam contoh ini, http://placehold.it/350x150 mewakili URL imej.

Pendekatan ini membenamkan dengan berkesan imej ke dalam div sambil mengekalkan keupayaan div untuk melaraskan saiznya berbanding imej. Untuk melihat demonstrasi langsung, lawati pautan berikut: http://jsfiddle.net/XAh2d/.

Untuk maklumat lanjut, rujuk http://css-tricks.com/css-content/ untuk panduan komprehensif untuk kandungan CSS.

Keserasian:

Teknik ini telah berjaya diuji pada Chrome, Firefox dan Safari (MacOS). Sila kongsi pengalaman anda dengan Internet Explorer jika anda mempunyainya.

Atas ialah kandungan terperinci Bagaimana untuk Membenamkan Imej ke dalam Div Menggunakan Harta Kandungan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!