Pengantar CSS Sprite
Biasanya diterjemahkan sebagai "penjahitan gambar CSS" atau "pemosisian tekstur CSS". CSS Sprite bukanlah teknologi baru, ia telah berkembang relatif matang dalam pengembangan web. Bayangan CSS Sprite dapat ditemukan di mana-mana di halaman web anak perusahaan Alibaba. Namun CSS Sprite bukanlah aturan emas, namun dalam banyak kasus, ia memiliki kelebihan tertentu. Yang terpenting adalah dapat mengurangi beban di server dan meningkatkan kecepatan memuat halaman web. Ketika desain web berkembang ke arah yang lebih canggih dan cerdik, desainer mulai mempertimbangkan untuk menggunakan metode non-Javascript untuk membuat efek menu mouse-over dan hover. Pada saat ini, CSS Sprite muncul.
Terus terang, CSS Sprite sebenarnya mengintegrasikan beberapa gambar latar belakang di halaman web ke dalam file gambar, dan kemudian menggunakan kombinasi CSS "background-image", "background-repeat" dan "background-position" untuk memposisikan latar belakang. Posisi dapat menggunakan angka untuk menemukan posisi gambar latar belakang secara akurat.
Saat halaman dimuat, alih-alih memuat masing-masing gambar, seluruh gambar gabungan dimuat sekaligus. Ini merupakan peningkatan yang luar biasa. Ini sangat mengurangi jumlah permintaan HTTP, mengurangi tekanan server, dan mempersingkat waktu tunda yang diperlukan untuk memuat gambar saat diarahkan, menjadikan efeknya lebih lancar dan tanpa jeda.
Artikel terkait CSS Sprite
Aplikasi CSS Sprite
Dalam hal ini, Taobao lebih baik. Izinkan saya mengambil Taobao sebagai contoh.
Contoh 1: Navigasi halaman saluran Taobao
Render:
diagram sprite:
