如何縮放 CSS 精靈中的裁切圖片？

在CSS Sprites 中縮放裁剪圖像

標題為“CSS Sprites：提高Web 性能的技術”的文章討論了從CSS Sprites中裁剪較小圖像的方法更大的圖像。本文探討了在將裁剪區域放入佈局之前不僅進行裁剪，還對其進行縮放的可能性。

如文章所示，範例CSS 程式碼片段可能如下所示：

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

要在從精靈中提取裁剪後的圖像後對其進行縮放，可以使用背景大小屬性。大多數主要瀏覽器（但不是全部）都支援此屬性。例如，要將裁剪後的圖像縮放到其原始大小的150%，可以使用以下樣式規則：

background-size: 150% 150%;

縮放裁剪後的圖像的另一種方法是利用縮放和變換的組合：尺度屬性。此方法為桌面和行動裝置提供跨瀏覽器支援。以下是一個範例：

[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 精靈中裁剪和縮放較小的圖像，從而在使用網頁佈局時實現更大的靈活性和自訂性。

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