如何使用'background-size”屬性縮放CSS Sprites？

使用背景大小屬性縮放CSS Sprites

當使用CSS Sprites 作為元素的背景圖像時，您可能會遇到這樣的情況：需要將精靈縮小到更小的尺寸。 background-size 屬性提供了一種輕鬆實現這種縮放的解決方案。

要縮放 CSS 精靈，只要為包含精靈的元素定義背景大小屬性即可。您為背景大小設定的值決定了精靈的縮放大小。例如，如果您想將精靈大小減小一半，請將背景大小設為精靈原始寬度和高度的一半。

在提供的範例中，精靈的尺寸為 100x100px。要將精靈縮放到其大小的一半，請按如下方式修改背景大小屬性：

.my-sprite {
  background-size: 50px 50px;
}

請記住相應地調整背景位置屬性以存取精靈表中所需的圖示。透過縮小精靈，您可以顯示較小版本的圖像，而不會失去任何細節。

以上是如何使用'background-size”屬性縮放CSS Sprites？的詳細內容。更多資訊請關注PHP中文網其他相關文章！