CSS Sprite - 多次调用

Question

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

例子:

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

我见过一些示例，其中您调用一次 Sprite 并仅更改背景位置。

例子:

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

Answer 1

该技术的唯一错误是您的 CSS 将包含冗余代码，这使得它比需要的更大(以字节为单位)。

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