Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Membenamkan Imej dalam Div Menggunakan CSS Tulen?

Bagaimana untuk Membenamkan Imej dalam Div Menggunakan CSS Tulen?

DDD
DDDasal
2024-11-01 03:14:02662semak imbas

How to Embed an Image within a Div Using Pure CSS?

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="..." /></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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn