Bagaimanakah Saya Boleh Membenamkan Imej SVG Terus ke dalam CSS Saya Menggunakan Definisi Sebaris?

Menggabungkan Imej SVG Sebaris ke dalam CSS

CSS menyediakan kaedah mudah untuk mengintegrasikan Grafik Vektor Boleh Skala (SVG) terus dalam pangkalan kodnya menggunakan definisi sebaris . Teknik ini membenarkan pembangun membenamkan grafik SVG sebagai imej latar belakang atau elemen reka bentuk lain.

Penggunaan

Untuk membenamkan imej SVG sebaris dalam CSS, gunakan yang berikut sintaks:

/* Class with inline SVG background image */
.my-class {
  background-image: url("data:image/svg+xml;utf8,
    <svg xmlns='http://www.w3.org/2000/svg' width='...' height='...'>
      ...
    </svg>");
}

Contoh

Pertimbangkan contoh berikut:

body {
    background-image: url("data:image/svg+xml;utf8,
      <svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
        <linearGradient>

Dalam contoh ini, definisi SVG sebaris mencipta kecerunan berwarna-warni latar belakang yang merangkumi keseluruhan halaman. SVG sebaris mengandungi Kecerunan linear untuk mentakrifkan kecerunan warna dan kecerunan tepat yang diisi dengan kecerunan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membenamkan Imej SVG Terus ke dalam CSS Saya Menggunakan Definisi Sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!