Bagaimana untuk Membenamkan Imej dalam Div Menggunakan CSS Tulen?

Cara Meletakkan Imej dalam Div Menggunakan CSS

Ramai pembangun menggunakan menetapkan imej sebagai imej latar belakang dalam CSS, penyelesaian yang tidak 't membenarkan div untuk mematuhi dimensi imej. Untuk meniru kod HTML berikut menggunakan CSS tulen:

<code class="html"><div><img  src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="Bagaimana untuk Membenamkan Imej dalam Div Menggunakan CSS Tulen?" ></div></code>

Penyelesaian:

Laksanakan kod berikut:

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

CSS:

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

Nota Tambahan:

• Teknik ini telah diuji pada Chrome, Firefox dan Safari.
• Rujuk sumber berikut untuk mendapatkan maklumat lanjut tentang kandungan CSS: http://css-tricks.com/css-content/

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