Penjana CSS Sprite
Alat penjana sprite CSS dalam talian percuma
Tentang Penjana Sprite CSS
Gabungkan berbilang imej yang dimuat naik menjadi satu helaian sprite PNG dan jana CSS background-position yang sepadan. Tiga susun atur disokong (mendatar, menegak, dan grid), dengan padding pilihan antara jubin dan kiraan lajur yang boleh dikonfigurasi untuk susun atur grid. Semua penggubahan berlaku pada kanvas dalam pelayar anda; tiada imej dimuat naik ke mana-mana.
Cara Penggunaan
1. Klik kawasan muat naik atau seret fail imej ke atasnya untuk menambahnya (berbilang fail disokong). 2. Pilih susun atur (mendatar, menegak, grid) dan, untuk grid, tetapkan kiraan lajur. 3. Pilihan: tetapkan padding dalam piksel antara jubin. 4. Klik Generate Sprite untuk membina semula helaian, kemudian Download Sprite untuk PNG dan Copy CSS untuk peraturan .icon-*.
Susun Atur & Output
mendatar menyusun imej dari kiri ke kanan menggunakan imej tertinggi sebagai ketinggian baris. menegak menyusun dari atas ke bawah menggunakan imej terlebar sebagai lebar lajur. grid membungkus imej ke dalam grid utama-lajur di mana setiap lajur dan baris bersaiz mengikut ahli terbesarnya. CSS yang dijana menggunakan nama kelas yang diterbitkan daripada nama fail (sambungan dibuang, aksara bukan alfanumerik digantikan dengan -), cth. .icon-home { width; height; background: url('sprite.png') no-repeat; background-position: -Xpx -Ypx; }. PNG output dieksport melalui canvas.toDataURL dan sentiasa PNG tanpa mengira format input.
▶Adakah CSS yang dijana merujuk nama fail sprite yang dimuat turun?
▶Adakah imej saya dimuat naik ke pelayan?
▶Apakah format imej yang boleh saya muat naik?
▶Mengapa aksara bukan ASCII dalam nama fail saya dibuang daripada kelas?
Jika alat ini membantu anda, pertimbangkan untuk membelikan saya kopi.
Belikan saya kopi