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

Bagaimana untuk Membenamkan Imej dalam Div Menggunakan CSS Tulen?

DDD
Lepaskan: 2024-11-01 03:14:02
asal
756 orang telah melayarinya

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>
Salin selepas log masuk

Penyelesaian:

Laksanakan kod berikut:

<code class="html"><div class="image"></div></code>
Salin selepas log masuk

CSS:

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

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan