如何使用'background-size”有效縮放CSS Sprites？

使用背景大小縮放 CSS Sprites

使用 CSS Sprites 作為背景圖像時，將它們縮放到更小的尺寸可能是理想的結果。本文深入探討如何使用背景大小屬性有效地縮放精靈。

問題：無法縮放精靈

嘗試將精靈縮放到較小尺寸時會出現一個常見問題，導致顯示完整圖像而不是所需的縮放版本。

解決方案使用background-size

要縮放精靈，注意精靈影像的尺寸至關重要。在您的範例中：

將背景影像設定為“https://i.sstatic.net/lJpW8.png”，圖片大小為 500x400。

要將其縮放一半，請在背景大小中定義新尺寸property:

`

...
背景大小: 250px 200px;
...

`

這會減少精靈的寬度和高度分別為250px 和200px。

調整背景位置

此外，要定位並顯示精靈中的特定圖標，請調整背景位置屬性。例如，要顯示原始全尺寸圖像中位於-200px 0px 的圖標，以下內容就足夠了：

`

...
background-position: 150px 0px;
.. .

`

記住，背景位置的位移距離是當精靈縮放到原始大小的一半時，減半。這可確保顯示所需的圖示。

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