css - CSS sprites - 多次调用

Question

为css中需要的每个实例调用精灵图像是否错误？浏览器如何处理这个，它只被加载一次吗？

例子：

.box1{ background: url('../img/sprite.png') 0 0 no-repeat; }
.box2{ background: url('../img/sprite.png') 0 -20px no-repeat; }
.btn{ background: url('../img/sprite.png') -100px -60px no-repeat; }

我见过一些例子，你调用精灵一次，然后改变背景位置。

例子：

#myDiv{ background: url('../img/sprite.png') 0 0 no-repeat; }
#myDiv .box2{ background-position: 0 -20px; }

Answer 1

该技术的唯一错误是您的 CSS 将具有冗余代码，这使得它（以字节计）比它需要的更大。

它不会多次加载背景图像。您可以通过打开开发人员工具并查看网络选项卡来确认这一点。

Answer 2

背景图像只会下载一次。

要对此进行测试，您可以通过执行以下操作来查看 Chrome 中正在下载哪些资源：

1. 导航到网页
2. 右键单击页面上的某处
3. 单击检查元素
4. 单击网络选项卡
5. 刷新页面

所有已加载的资源都将显示在此列表中。

此外，您可以像这样干燥您的 CSS：

.box1, .box2, .btn{ background-image: url('../img/sprite.png') }
.box1{ background-position: 0 0 no-repeat; }
.box2{ background-position: 0 -20px no-repeat; }
.btn{ background-position: -100px -60px no-repeat; }