使用 CSS 通过背景加载单个图像有什么好处?
Any benefit to loading a single image via background with CSS?
好吧,如果你有很多图标,你通常会通过背景图片加载它们,这样你就可以使用 sprite;但是,我只是想知道当它只是一个图像时,通过背景加载它们与通过 img
标签加载它们是否有任何优势?
CSS 中的那个是否仍然对图像进行 http 请求?
是的,它仍然会发出请求,除非您 URL 对图像进行编码,但这也可以进行内联,但不一定性能更高。
听起来您最感兴趣的是这对性能有何影响。但由于问题是开放式的,这里还有其他原因,为了完整性:
- 如果需要根据宽度计算图片的高度(常见的响应式设计方法是
width: [something > 0]; height: 0; padding-bottom: [some]%
)
- 如果您需要使用 CSS 来换出图像(基本图标示例:如果图像在
:hover
发生变化,而您出于多种原因没有使用 sprite)
- 如果您需要能够使用 CSS 背景选项,例如
background-size
或 background-position
(IE > 8)
- 如果您需要 HTML 在图像之上而不添加其他元素
- 如果你需要使用像
:before
和 :after
这样的伪元素,
不支持它们(无论如何 不需要 支持)
好吧,如果你有很多图标,你通常会通过背景图片加载它们,这样你就可以使用 sprite;但是,我只是想知道当它只是一个图像时,通过背景加载它们与通过 img
标签加载它们是否有任何优势?
CSS 中的那个是否仍然对图像进行 http 请求?
是的,它仍然会发出请求,除非您 URL 对图像进行编码,但这也可以进行内联,但不一定性能更高。
听起来您最感兴趣的是这对性能有何影响。但由于问题是开放式的,这里还有其他原因,为了完整性:
- 如果需要根据宽度计算图片的高度(常见的响应式设计方法是
width: [something > 0]; height: 0; padding-bottom: [some]%
) - 如果您需要使用 CSS 来换出图像(基本图标示例:如果图像在
:hover
发生变化,而您出于多种原因没有使用 sprite) - 如果您需要能够使用 CSS 背景选项,例如
background-size
或background-position
(IE > 8) - 如果您需要 HTML 在图像之上而不添加其他元素
- 如果你需要使用像
:before
和:after
这样的伪元素,不支持它们(无论如何 不需要 支持)