Bagaimana untuk Menskala Sprite CSS dengan Berkesan Menggunakan `saiz latar belakang`?

Menskalakan CSS Sprite dengan saiz latar belakang

CSS sprite, imej yang terdiri daripada berbilang imej yang lebih kecil, ialah teknik yang berharga untuk mengurangkan permintaan HTTP. Walau bagaimanapun, isu mungkin timbul apabila anda perlu menskalakan sprite ini kepada dimensi yang lebih kecil.

Sebagai contoh, katakan anda mempunyai sprite dengan saiz 100x100px dan anda ingin mengurangkannya separuh. Menggunakan sifat bersaiz latar belakang nampaknya tidak berjaya.

Penyelesaian:

Kuncinya terletak pada memahami saiz asal sprite. Katakan imej sprite anda mempunyai dimensi 500x400. Untuk menskalakannya separuh, anda perlu mentakrifkan saiz latar belakang kepada separuh daripada dimensi ini:

background-size: 250px 200px;

Selain itu, anda mungkin perlu melaraskan kedudukan latar belakang untuk memastikan anda mengakses bahagian yang dikehendaki sprite itu. Contohnya, untuk memaparkan bahagian kiri atas sprite, anda boleh menggunakan:

background-position: 150px 0px;

Dengan pelarasan ini, anda boleh menskalakan sprite CSS anda dengan berkesan kepada dimensi yang lebih kecil sambil mengekalkan bahagian imej yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Menskala Sprite CSS dengan Berkesan Menggunakan `saiz latar belakang`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!