如何在 CSS Sprite 中縮放裁切後的圖片？

縮放CSS Sprite 中的裁切影像

在「建立CSS Sprite 來增強頁面效能」一文中，介紹瞭如何從較大的影像中裁剪較小的影像。但是，您可能會遇到這樣的情況：您需要先縮放裁剪後的圖像，然後再將其合併到您的設計中。這可以使用各種技術來實現。

背景大小方法（IE9，現代瀏覽器）

使用背景大小屬性來指定所需的縮放小裁剪後的圖像。例如，如果您想將圖像大小加倍，請使用值 150% 150%。

background-size: 150% 150%;

縮放和變換縮放

為了跨瀏覽器相容性，將WebKit/Blink/IE 瀏覽器的縮放與Mozilla 和舊版Opera 的轉換：縮放相結合瀏覽器。

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

此方法可讓您縮放精靈的特定裁切區域，而不會影響其他片段。您可以調整縮放和縮放值以達到所需的尺寸。

以上是如何在 CSS Sprite 中縮放裁切後的圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！