使用 CSS 通过背景加载单个图像有什么好处？

Question

好吧，如果你有很多图标，你通常会通过背景图片加载它们，这样你就可以使用精灵了；但是，我只是想知道通过背景加载它们是否有任何优势，而不是通过 img 标签加载它们时它只是一个单一的图像？

CSS 中的那个是否仍然对图像发出 http 请求？

Answer 1

听起来您最感兴趣的是这如何影响性能。但由于这个问题是开放式的，为了完整起见，这里还有其他原因：

• 如果需要根据图片的宽度计算图片的高度（常见的响应式设计方法是width: [something > 0]; height: 0; padding-bottom: [some]%）
• 如果您需要使用 CSS 来换出图像（基本图标示例：如果图像在 :hover 上发生变化，并且由于多种原因您没有使用精灵）
• 如果您需要能够使用 CSS 背景选项，例如 background-size 或 background-position (IE > 8)
• 如果您需要在图像顶部添加 HTML 而不添加其他元素
• 如果您需要使用像:before 和:after 这样的伪元素，而 不支持这些伪元素（无论如何都不需要支持）

Answer 2

是的，它仍然会发出请求，除非您对图像进行 URL 编码，但您也可以内联执行此操作，但不一定性能更高。