CSS sprites - 多个调用(CSS sprites - multiple calls)

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

Is it wrong to call the sprite image for every instance it is needed in css? How does the browser handle this, is it only being loaded once?

Example:

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

I have seen some examples where you call the sprite once and just alter the background position.

Example:

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

最满意答案

这种技术唯一的错误就是你的CSS会有冗余的代码，这会使它比它需要的更大（以字节为单位）。

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

The only thing wrong with that technique is that your CSS will have redundant code, which makes it larger (in terms of bytes) than it needs to be.

It does not load the background image more than once. You can confirm this by opening your developer tools and watching the network tab.

CSS sprites - 多个调用(CSS sprites - multiple calls)

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

Is it wrong to call the sprite image for every instance it is needed in css? How does the browser handle this, is it only being loaded once?

Example:

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

I have seen some examples where you call the sprite once and just alter the background position.

Example:

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

最满意答案

这种技术唯一的错误就是你的CSS会有冗余的代码，这会使它比它需要的更大（以字节为单位）。

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

The only thing wrong with that technique is that your CSS will have redundant code, which makes it larger (in terms of bytes) than it needs to be.

It does not load the background image more than once. You can confirm this by opening your developer tools and watching the network tab.