Penjana Sprite CSS

Menggabungkan berbilang imej yang dimuat naik (PNG, JPEG, atau SVG) menjadi satu helaian sprite PNG yang dirender pada canvas, dan menjana peraturan CSS background-position yang sepadan. Tiga susun atur ditawarkan: mendatar, menegak, dan padat (bungkus baris). Padding piksel pilihan boleh dimasukkan antara sprite.

1. Klik zon muat naik atau seret fail imej ke atasnya. PNG, JPEG, dan SVG diterima; fail bukan imej akan ditapis keluar. 2. Pilih Susun Atur (Mendatar, Menegak, Padat) dan Padding pilihan dalam piksel (0-100). 3. Klik Jana. Pratonton sprite muncul pada latar belakang berkotak-kotak. 4. Klik Muat Turun untuk menyimpan sprite.png, dan gunakan Salin CSS untuk menyalin peraturan CSS yang dijana.

Susun atur Mendatar meletakkan imej dari kiri ke kanan dalam satu baris yang ketinggiannya sama dengan imej tertinggi. Menegak menyusunnya dari atas ke bawah dalam satu lajur yang lebarnya sama dengan imej terlebar. Padat membungkus ke dalam baris berdasarkan lebar yang diperoleh daripada ceil(sqrt(count)) didarab dengan imej terlebar. CSS yang dijana mengeluarkan satu kelas '.icon-<nama>' bagi setiap imej, dengan width, height, deklarasi 'background: url(sprite.png) no-repeat', dan background-position negatif. Nama fail dibuang sambungannya dan disanitasi kepada [a-zA-Z0-9_-].