我的网站中有很多小图标。由于性能提升，我正在考虑使用 CSS Sprite ，而不是独立加载所有这些。
考虑以下代码
<div style="width: 24px; height: 24px;background: url('img.png') -10px -10px;"></div>
对比
<img src="css-sprites.png" style="width: 24px;height: 24px;">
正如预期的那样，两者给出相同的结果。当作为图像加载时(第二种情况)，如果我将实际图像的分辨率保持为较高的值，例如 128*128，并使用 24*24 进行显示，即使我们在浏览器中缩放页面(在火狐)。
但是当使用CSS Sprite 时，由于我必须在 Sprite 中保持相同的显示分辨率，因此缩放时图像会变得模糊。
这是预期的行为还是我做错了什么？使用 css sprites 时有什么办法可以解决这个问题吗？
我对 html 没有太多经验，也是第一次使用 css sprites。请帮忙。
编辑:另外，我可以在互联网上看到许多关于缩放时跨浏览器问题的帖子。现在这还是值得关注的问题吗？
最佳答案
如果您的 Sprite 大小为 200x200 像素，并且您想通过缩放获得更好的分辨率 - 请设置background-size: 100px 100px;。因此，如果您缩放至 200%，图像质量仍然很好。显然，您的 Sprite 图像应该是您将在网站上使用的尺寸的两倍。为避免出现问题 - 请勿在一个 background-size 中混合 % 和 px 或任何其他不同的单位。在您的情况下仅使用 px ，一切都会正常工作。
总结。将 Sprite 放大两倍，将 background-size 设置为 Sprite 图像大小的两倍。在Chrome和FF中测试过。缩放效果很好。
如果您熟悉 svg 文件 - 尝试使用 http://fontastic.me/ 制作您自己的矢量字体(用于图标) 。任何缩放问题都不会打扰您。您可以通过 font-size 设置大小，并通过 CSS 中的 color 设置它们的颜色，就像文本一样。
关于html - 浏览器缩放期间 CSS Sprite 与图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61844748/