Artikel Pengenalan Wulin.com (www.vevb.com): CSS Sprite, kadang-kadang disebut gambar sprite dan elf, adalah masalah yang setiap pertemuan pembukaan front-end, dan juga merupakan metode umum dari optimasi pemuatan gambar kecil. Saya percaya semua siswa tahu prinsipnya, jadi saya tidak akan membahas detailnya.
CSS Sprite, kadang-kadang disebut sprite dan sprite, adalah masalah yang dibuka setiap front-end dan juga merupakan metode umum dari optimasi pemuatan gambar kecil. Saya percaya semua siswa tahu prinsipnya, jadi saya tidak akan membahas detailnya.
Saya selalu termotivasi untuk menggunakan HTML5 untuk mewujudkan alat untuk mensintesis gambar sprite, yang memfasilitasi pengembangan cepat proyek kecil dan mengurangi beberapa tenaga kerja mekanis seperti membuka photoshop, kembang api, dan alat lain untuk menggabungkan gambar. Baru -baru ini, saya akhirnya meluangkan waktu untuk hamil dan mengimplementasikannya.
GO! PNG PENDAHULUAN:Fungsi saat ini adalah sebagai berikut:
Instruksi untuk digunakan: 1. Seret dan letakkan file gambar kecil ke area operasi, seperti yang ditunjukkan di bawah ini: 2. Pengaturan atribut kelas input dan gambar target dan pembuatan file CSS, seperti yang ditunjukkan pada gambar di bawah ini 3. File CSS yang dihasilkan dapat disesuaikan dengan mengubah template CSS.Fungsi template yang digunakan adalah mikro-templation John Resig.
Variabel yang dapat digunakan adalah:
Penjelasan x, y, w, dan h adalah sebagai berikut:
Pengaturan template CSS adalah sebagai berikut:
4. Setelah menghasilkan gambar target dan CSS, Anda dapat mengunduhnya secara langsungKlik tombol Unduh untuk menyelesaikan unduhan:
5. Ekspor Status KerjaFungsi ini dapat mengekspor status kerja Anda saat ini, termasuk data gambar (gambar, pengaturan lokasi gambar), pengaturan parameter (termasuk pengaturan parameter beranda dan pengaturan template CSS), ke dalam satu file, dan Anda dapat mengembalikan status kerja Anda lain kali menggunakan file ini.
Ekspor Gambar berikut:
Impor gambar berikut:
Dapat dipulihkan: