Bagaimana Saya Boleh Skalakan Imej yang Dipotong Dalam CSS Sprite?

Menskalakan Imej yang Dipotong dalam CSS Sprite

Artikel bertajuk "CSS Sprites: Teknik untuk Meningkatkan Prestasi Web" membincangkan kaedah untuk memangkas imej yang lebih kecil daripada imej yang lebih besar. Artikel ini meneroka kemungkinan bukan sahaja memangkas tetapi juga menskalakan kawasan yang dipangkas sebelum meletakkannya dalam reka letak.

Seperti yang ditunjukkan dalam artikel, contoh coretan kod CSS mungkin kelihatan seperti ini:

A {
  background-image: url(spriteme1.png);
  background-position: -10px -56px;
}

Untuk menskalakan imej yang dipangkas selepas ia diekstrak daripada sprite, sifat bersaiz latar belakang boleh digunakan. Sifat ini disokong oleh kebanyakan pelayar utama (tetapi bukan semua). Contohnya, untuk menskalakan imej yang dipangkas kepada 150% daripada saiz asalnya, peraturan gaya berikut boleh digunakan:

background-size: 150% 150%;

Satu lagi pendekatan untuk menskalakan imej yang dipangkas adalah dengan menggunakan gabungan zum dan transformasi: sifat skala. Kaedah ini menyediakan sokongan silang pelayar untuk kedua-dua peranti desktop dan mudah alih. Berikut ialah contoh:

[class^="icon-"] {
  display: inline-block;
  background: url('../img/icons/icons.png') no-repeat;
  width: 64px;
  height: 51px;
  overflow: hidden;
  zoom: 0.5;
  /* Mozilla support */
  -moz-transform: scale(0.5);
  -moz-transform-origin: 0 0;
}

.icon-big {
  zoom: 0.60;
  /* Mozilla support */
  -moz-transform: scale(0.60);
  -moz-transform-origin: 0 0;
}

.icon-small {
  zoom: 0.29;
  /* Mozilla support */
  -moz-transform: scale(0.29);
  -moz-transform-origin: 0 0;
}

Dengan teknik ini, anda boleh memangkas dan menskalakan imej yang lebih kecil daripada sprite CSS, membolehkan fleksibiliti dan penyesuaian yang lebih besar apabila bekerja dengan reka letak halaman web.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Skalakan Imej yang Dipotong Dalam CSS Sprite?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!