如何使用「background-size」將 CSS Sprites 縮放到一半大小？

使用背景大小縮放CSS Sprites

Sprite 是一種用於將多個圖像組合成單一圖像的技術，從而提高網站性能。然而，當使用精靈作為背景圖像時，您可能會遇到將它們縮放到所需尺寸的挑戰。

挑戰：

在這個特定場景中，目標是縮放使用背景大小屬性將 100 像素 x 100 像素的精靈縮小到其大小的一半。目前程式碼會顯示全尺寸影像。

解決方案：

要解決此問題，您需要定義精靈影像的尺寸。在本例中，由於精靈為 500px x 400px，因此您可以將背景大小設為 250px x 200px 將其縮小一半。另外，調整背景位置以獲得所需的圖示。

範例：

.my-sprite {
  background-image: url("https://i.sstatic.net/lJpW8.png");
  height: 50px;
  width: 50px;
  background-position: 150px 0px;
  background-size: 250px 200px;
  border: 1px solid; /* for testing */
}

<div class="my-sprite"></div>

透過這些調整，精靈將縮小到原始大小的一半，產生 50 像素 x 50 像素的圖像。背景位置值 150px 0px 確保所需的圖示在精靈中可見。

以上是如何使用「background-size」將 CSS Sprites 縮放到一半大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！