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; }