Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Bagaimana untuk Membenamkan Imej PNG Terus ke dalam HTML Tanpa Fail Luaran?

Bagaimana untuk Membenamkan Imej PNG Terus ke dalam HTML Tanpa Fail Luaran?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-10-28 20:35:31425semak imbas

How to Embed PNG Images Directly into HTML Without External Files?

Membenamkan Imej PNG ke dalam Halaman HTML

Tugas membenamkan imej PNG ke dalam halaman HTML tanpa memaut ke fail imej menimbulkan persoalan : bagaimana untuk memasukkan data imej terus ke dalam HTML?

Membenamkan dengan Pengekodan Base64

Pengekodan Base64 menyediakan penyelesaian untuk membenamkan imej ke dalam HTML. Terdapat pelbagai pengekod Base64 dalam talian yang tersedia, tetapi disyorkan untuk menggunakan pengekod yang teguh seperti yang terdapat di http://www.greywyvern.com/code/php/binary2base64.

Alat ini membentangkan dua pilihan pembenaman utama : menggunakan CSS atau tag.

Pembenaman CSS

Dalam CSS, pembenaman boleh dicapai seperti berikut:

<code class="css">div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}</code>

Pembenaman Teg

Sebagai alternatif, tag boleh digunakan:

<code class="html"><img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" /></code>

Dengan menggunakan pengekodan Base64, anda boleh membenamkan imej PNG terus ke halaman HTML, membolehkan paparan imej tanpa memerlukan fail imej luaran.

Atas ialah kandungan terperinci Bagaimana untuk Membenamkan Imej PNG Terus ke dalam HTML Tanpa Fail Luaran?. 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