Apakah css sprite dan apakah kelebihannya?

css sprite, juga dikenali sebagai css sprite, ialah kaedah pemprosesan aplikasi imej web Ia merupakan kaedah menggabungkan berbilang imej ke dalam satu fail imej untuk digunakan pada tapak web. Kelebihannya ialah: 1. Kurangkan permintaan http untuk laman web dan tingkatkan kelajuan memuatkan halaman 2. Kurangkan bait imej 3. Kurangkan masalah penamaan;

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

css sprite (Sprite)

CSS Sprites ialah teknik pengoptimuman prestasi yang menggabungkan berbilang imej ke dalam satu fail imej untuk digunakan pada Kaedah tapak web untuk meningkatkan prestasi juga dikenali sebagai sprite CSS.

Kelebihan

a) Kurangkan permintaan http untuk halaman web dan tingkatkan kelajuan pemuatan halaman

b) Kurangkan bait imej: gabungkan berbilang imej Bait bagi satu gambar adalah kurang daripada jumlah bait berbilang gambar

c) Mengurangkan masalah penamaan: anda hanya perlu menamakan koleksi gambar, dan tidak perlu menamakan setiap elemen kecil untuk meningkatkan kecekapan pengeluaran

d) Mudah untuk menukar gaya: anda hanya perlu mengubah suai warna atau gaya satu atau beberapa gambar, dan gaya keseluruhan halaman web boleh ditukar, menjadikannya lebih mudah untuk mengekalkan

Kelemahan

a) Apabila menggabungkan gambar, anda perlu menggabungkan berbilang gambar menjadi satu gambar dengan teratur dan munasabah, dan meninggalkan ruang yang cukup untuk mengelakkan latar belakang yang tidak diperlukan bahagian; Ini tidak mengapa, tetapi perkara yang paling menyakitkan ialah halaman penyesuaian di bawah skrin lebar dan skrin resolusi tinggi. Jika gambar anda tidak cukup lebar, latar belakang mudah pecah

b) Apabila menetapkan. latar belakang, anda perlu mendapatkan setiap Kedudukan tepat unit latar belakang

c) Adalah lebih menyusahkan untuk mengekalkan imej komposit Jika latar belakang halaman diubah sedikit, imej yang digabungkan biasanya perlu ditukar adalah lebih baik untuk menambah imej di bawah daripada menukar yang sedia ada

Mengapa menggunakan Sprite?

Halaman web selalunya mengandungi berbilang imej. Ini termasuk ikon, butang, logo, gambar berkaitan dan grafik lain. Apabila imej dimuatkan ke dalam halaman, penyemak imbas membuat permintaan HTTP kepada pelayan. Memuatkan setiap imej secara individu memerlukan berbilang panggilan ke pelayan HTTP, yang boleh mengakibatkan masa muat turun yang perlahan dan penggunaan lebar jalur yang tinggi.

CSS Sprites akan menggabungkan berbilang imej ke dalam satu imej yang dipanggil helaian sprite atau kolaj daripada memuat turun berbilang fail, pengguna memuat turun satu fail dan memaparkan imej yang diperlukan melalui fail offset (atau sprite).

Ini boleh mengurangkan panggilan ke pelayan, mengurangkan bilangan muat turun yang diperlukan untuk memaparkan halaman web, menjimatkan lebar jalur dan memendekkan masa muat turun pada bahagian klien dan mengurangkan kesesakan rangkaian.

Bagaimana untuk menggunakan CSS Sprites?

Oleh kerana CSS Sprite ialah berbilang imej yang digabungkan menjadi satu imej, berbilang imej akan diletakkan dalam corak seperti grid dalam helaian sprite, menunjukkan pengedaran rangkaian.

Apabila imej tertentu (peta sprite) diperlukan, helaian sprite biasanya dirujuk melalui atribut imej latar belakang CSS, dan kemudian diimbangi dan diletakkan melalui atribut kedudukan latar belakang CSS untuk mendapatkan peta sprite yang diperlukan, dan kemudian Mentakrifkan saiz imej sprite dalam piksel.

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah css sprite dan apakah kelebihannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!