Menggunakan Data SVG URI untuk melaksanakan latar belakang watak khas HTML

Artikel ini meneroka secara mendalam bagaimana menggunakan teknologi CSS dan SVG Data URI untuk menggunakan aksara khas dengan cekap dan fleksibel sebagai corak latar belakang halaman HTML. Kaedah ini secara langsung membenamkan imej SVG ke dalam atribut imej latar belakang CSS, mengatasi batasan unsur-unsur pseudo tradisional, mencapai kawalan tepat warna, saiz, dan pengulangan watak yang tepat, dan menyediakan keupayaan penyesuaian visual yang kaya untuk reka bentuk web.

Dalam reka bentuk web, kadang -kadang kita perlu menambah latar belakang yang terdiri daripada aksara khas berulang ke halaman untuk mencapai kesan visual yang unik. Pemula boleh cuba menggunakan pseudo-elemen CSS :: Sebelum digabungkan dengan atribut kandungan untuk memasukkan aksara khas, sebagai contoh:

 html :: sebelum {
  Kandungan: '\ 2591'; /* Cuba masukkan aksara menggunakan elemen pseudo*/
  / * ... tetapi ini tidak boleh digunakan sebagai corak latar belakang yang akan diisi berulang kali */
}

Walau bagaimanapun, terdapat batasan pendekatan ini. Walaupun :: Sebelum pseudo-elemen dapat memasukkan kandungan, ia biasanya wujud sebagai elemen bebas dari halaman, yang terletak di aliran kandungan, dan sukar untuk mencapai kesan jubin sebagai latar belakang seluruh halaman. Ia tidak secara semulajadi mengisi keseluruhan viewport berulang kali seperti imej latar belakang, dan sukar untuk dilindungi oleh kandungan sebenar halaman.

Buat latar belakang watak menggunakan data SVG URI

Untuk melaksanakan watak -watak khas sebagai corak latar belakang yang berulang, penyelesaian CSS yang paling elegan dan tulen adalah menggunakan data SVG URI. Pendekatan ini membolehkan kita menentukan imej SVG kecil yang mengandungi watak-watak khas yang kita mahu terus dalam CSS dan kemudian memohon sebagai imej latar belakang pada elemen HTML.

Berikut adalah contoh kod CSS untuk mencapai kesan ini:

 html {
  /* Gunakan data uri data svg sebagai imej latar belakang*/
  Imej latar belakang: URL ("Data: imej/svg xml; utf8, <svg xmlns="'http:" version="'1.1'" ketinggian="'25px'" width="'20px'"> font-size = '20 '> ░  </svg> ");
  / * Secara lalai, imej latar belakang akan berulang kali berjubin */
  /* Latar Belakang: Ulangi; */ 
  /* Latar Belakang: Auto; */
}

Dengan struktur HTML yang mudah, anda dapat melihat kesannya:

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <tirly> Contoh latar belakang watak khas 
    <yaya>
        html {
            Ketinggian: 100%; /* Pastikan elemen HTML mengisi paparan supaya latar belakang dapat dipaparkan sepenuhnya*/
            Margin: 0;
            Padding: 0;
            Imej latar belakang: URL ("Data: imej/svg xml; utf8, <svg xmlns="'http:" version="'1.1'" ketinggian="'25px'" width="'20px'"> font-size = '20 '> ░  </svg> ");
            latar belakang warna: #f0f0f0; /* Apabila svg telus, anda boleh menetapkan warna latar*/
        }
        badan {
            Margin: 0;
            Padding: 20px;
            font-family: sans-serif;
            Warna: #333;
        }
        p {
            Margin-Bottom: 1EM;
            Talian ketinggian: 1.6;
        }
    


    <p> Ini adalah kandungan laman web sampel. </p>
    <p> Latar belakang terdiri daripada watak -watak khas yang berulang "░". </p>
    <p> Kandungan jelas kelihatan di atas latar belakang. </p>
    <p> Dengan menyesuaikan parameter SVG, anda boleh menukar gaya dan susunan aksara. </p>

</yaya></tirly>

Analisis kod dan langkah berjaga -jaga

1. Data: Imej/SVG XML; UTF8, ... : Ini adalah skema URI data untuk membenamkan fail kecil terus ke HTML atau CSS. Imej/SVG XML Menentukan jenis data adalah imej SVG, dan UTF8 menentukan kaedah pengekodan.
2. :
   • XMLNS: Mengisytiharkan ruang nama SVG, ini adalah amalan standard.
   • Versi: Versi SVG.
   • Ketinggian dan Lebar: Tentukan dimensi imej SVG tunggal, yang menentukan saiz setiap watak "jubin" di latar belakang. Anda boleh menyesuaikannya seperti yang diperlukan untuk mengawal jarak antara aksara.
3. ░ :
   • : elemen teks dalam SVG, digunakan untuk memaparkan aksara.
   • X dan Y: Tentukan kedudukan permulaan teks. Nilai y biasanya kedudukan asas, jadi y = '15 'bermaksud garis dasar teks berada pada 15px dari bekas SVG.
   • Isi: Tetapkan warna watak. Tetapkan ke merah di sini. Anda boleh menggunakan sebarang nilai warna CSS.
   • Saiz Font: Tetapkan saiz aksara.
   • ░: Ini adalah watak khas yang akan dipaparkan (Unicode \ 2591). Anda boleh menggantikannya dengan watak Unicode yang lain.
4. Pengulangan latar belakang dan kedudukan :
   • Apabila imej latar belakang menggunakan imej yang lebih kecil daripada bekasnya, tingkah laku lalai adalah latar belakang: ulangi;, yang bermaksud imej akan dijubal secara mendatar dan menegak.
   • Anda boleh mengawal kaedah jubin melalui atribut berulang latar belakang (seperti NO-Repeat, Repeat-X, Repeat-Y).
   • Latar belakang kedudukan boleh menyesuaikan kedudukan permulaan jubin.
   • Saiz latar belakang mengubah saiz setiap imej SVG, yang mempengaruhi saiz paparan sebenar dan ketumpatan aksara. Sebagai contoh, saiz latar belakang: 10px 10px; akan menjadikan setiap SVG "jubin" lebih kecil.

Meringkaskan

Dengan memanfaatkan data SVG URI, kita boleh dengan bijak memohon aksara khas ke laman web sebagai imej latar belakang CSS tulen. Kaedah ini bukan sahaja menyelesaikan batasan unsur -unsur pseudo tradisional dalam pelaksanaan latar belakang, tetapi juga memberikan fleksibiliti yang sangat tinggi, yang membolehkan pemaju mengawal gaya, saiz, warna, dan jubin latar belakang. Ini membuka cara baru untuk mencapai kesan latar belakang visual yang unik dan ringan tanpa bergantung pada fail imej luaran atau JavaScript. Dengan keserasian yang baik dalam pelayar moden, SVG data URI adalah pilihan profesional dan cekap untuk melaksanakan latar belakang sedemikian.

Atas ialah kandungan terperinci Menggunakan Data SVG URI untuk melaksanakan latar belakang watak khas HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!