Html 如何为不同大小的图标重用css背景精灵？

我将一组图标合并到一个.png文件中，并使用css背景位置在页面上显示这些图标，因为img标记会生成更多的http请求

但是，我需要以两种不同的尺寸显示每个图标：20x20、60x60。如何在不创建两个单独的.png文件（20x400和60x1200）的情况下执行此操作

我知道background size属性可以缩放背景图像，但它是在css3中引入的，IE在9.0之前不支持它

---

是否可以不使用背景大小？

我认为可以使用“背景：大小”属性。使用它，您可以“视觉上重新缩放”背景图像

---

请看

最好的方法是使用“字体图标技术”-您可以在web上阅读所有相关信息。当您需要与标记视网膜兼容时，它也很有帮助，因为出于兼容原因，您不能使用背景大小，您可以尝试在同一图像中同时使用图标的大小版本。如何对它们进行分组取决于您，但是您应该进行一些测试，以确定图像大小的增加是否仍然会导致页面的可接受加载时间

---

+1用于图标字体。你可以用它们做一些非常奇特的事情，例如。

“不使用背景尺寸是否可能？”我认为如果有其他方法，他不想使用它。。。。。。我没有读那句话。。。。无论如何，我不认为这可能是纯css中的其他解决方案…支持还不错。请注意，我们的大部分用户仍然使用IE7或IE6。是的，这可能是一个很好的解决方案，但在这种情况下。。。。放弃背景图像（=精灵技术）。这不是批评，只是精确化