Bagaimana untuk Memaparkan Imej Di Dalam Div Menggunakan CSS Tanpa Imej Latar Belakang?-tutorial css-php.cn

Bagaimana untuk Memaparkan Imej Di Dalam Div Menggunakan CSS Tanpa Imej Latar Belakang?

Linda Hamilton

Lepaskan： 2024-10-30 07:23:27

asal

643 orang telah melayarinya

How to Display Images Inside Divs Using CSS Without Background Images?

Menggunakan CSS untuk Memaparkan Imej dalam Div

Apabila ia datang untuk memaparkan imej dalam div, menggunakan imej latar belakang mungkin kelihatan seperti pendekatan yang paling mudah . Walau bagaimanapun, kaedah ini menimbulkan had dalam menghalang div daripada melaraskan saiznya untuk menampung imej.

Untuk mengatasi sekatan ini dan mencapai kefungsian

struktur dalam CSS, pendekatan berikut telah diiktiraf sebagai berkesan:

Penyelesaian:

Melaksanakan

elemen dengan kelas tertentu, seperti "imej".

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

Salin selepas log masuk

Dalam CSS anda, tentukan elemen pseudo untuk

elemen dan gunakan sifat kandungan untuk menentukan URL imej.

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

Salin selepas log masuk

Maklumat Tambahan:

Sifat kandungan membenarkan pemasukan kandungan yang dinamik ke dalam pseudo- elemen, termasuk imej. Dengan merujuk URL imej dalam sifat ini, anda boleh memaparkan imej dalam div.

Untuk mendapatkan maklumat menyeluruh tentang menggunakan CSS untuk melaksanakan penyelesaian ini, rujuk sumber berikut:

[Helah CSS: Menggunakan Kandungan CSS](http://css-tricks.com/css-content/)

Keserasian:

Pendekatan yang dibentangkan telah berjaya diuji dalam Chrome, Firefox dan Safari pada sistem pengendalian Mac. Untuk memastikan keserasian merentas pelbagai penyemak imbas, adalah disyorkan untuk mengesahkan kefungsiannya dalam persekitaran yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Imej Di Dalam Div Menggunakan CSS Tanpa Imej Latar Belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Membuka Tetingkap Pop Timbul Bersaiz Tersuai dengan JavaScript? Artikel seterusnya：Bagaimana untuk Mencipta Berbilang Div Boleh Dilipat dalam CSS Tulen Tanpa Kod Luas?

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

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2060

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2214

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1869

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...