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

使用背景大小缩放 CSS Sprites

使用 CSS Sprites 作为背景图像时，将它们缩放到更小的尺寸可能是理想的结果。本文深入探讨了如何使用背景大小属性有效地缩放精灵。

问题：无法缩放精灵

尝试将精灵缩放到较小尺寸时会出现一个常见问题，导致显示完整图像，而不是所需的缩放版本。

使用背景大小的解决方案

要缩放精灵，注意精灵图像的尺寸至关重要。在您的示例中：

将背景图像设置为“https://i.sstatic.net/lJpW8.png”，图像大小为 500x400。

要将其缩放一半，请在 background-size 属性中定义新尺寸：

`

...
background-size: 250px 200px;
。 ..

`

这会将精灵的宽度和高度分别减少到 250px 和 200px。

调整背景位置

此外，要定位并显示精灵中的特定图标，请调整背景位置属性。例如，要显示位于原始全尺寸图像中 -200px 0px 的图标，以下内容就足够了：

`

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

`

请记住，当精灵缩放到原始大小的一半时，背景位置的位移距离减半。这可确保显示所需的图标。