Bagaimanakah Saya Boleh Skalakan Imej yang Dipotong Dalam CSS Sprite?

Skalakan Imej yang Dipotong dalam CSS Sprite

Dalam artikel "Cipta CSS Sprite untuk Meningkatkan Prestasi Halaman Anda," ia menerangkan cara untuk memangkas imej yang lebih kecil daripada yang lebih besar. Walau bagaimanapun, anda mungkin menghadapi senario di mana anda perlu menskalakan imej yang dipangkas sebelum memasukkannya ke dalam reka bentuk anda. Ini boleh dicapai menggunakan pelbagai teknik.

Kaedah Saiz Latar Belakang (IE9 , Penyemak Imbas Moden)

Gunakan sifat bersaiz latar belakang untuk menentukan saiz berskala yang dikehendaki bagi imej yang dipangkas. Sebagai contoh, jika anda ingin menggandakan saiz imej, gunakan nilai 150% 150%.

background-size: 150% 150%;

Zum dan Skala Transformasi

Untuk keserasian merentas pelayar , gabungkan zum untuk pelayar WebKit/Blink/IE dengan transform:scale untuk Mozilla dan Opera yang lebih lama penyemak imbas.

[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;
}

Kaedah ini membolehkan anda menskala kawasan pangkas sprite tertentu tanpa menjejaskan segmen lain. Anda boleh melaraskan nilai zum dan skala untuk mencapai saiz yang diingini.

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