css - 当前的 Google 主页 - 为什么使用 css sprite 而不是单个图像？

Question

看看此时正在显示的 Google 主页。下面提供了一个屏幕截图。

Google 没有将其用作单个图像，而是使用 css sprite。精灵图像

提供如下（尺寸已更改）：

问题是为什么使用 css sprite 而不是单个图像？如果使用单个图像，那么 HTTP 请求的数量是否与此 css sprite 案例中的相同？

Answer 1

单个图像不允许在不同区域出现（不同）悬停效果。

或者您必须为每个动画加载相同大小的图像。通过使用精灵，您只需加载一次图像，所有动画都使用该数据运行。

Answer 2

CSSsprites 是一种减少对站点引用的资源的HTTP请求数量的方法。图像在定义的 X 和 Y 坐标处组合成一张较大的图像。image

将此生成的图像分配给相关页面元素后，background-positionCSS 属性可用于将可见区域移动到所需的组件图像。