Question

我试图通过在项目中使用精灵图像来减少HTTP调用的数量。所以结构是这样的：

<div class="parent">
  <div class="child-1">Content here</div>
  <div class="child-2">Content here</div>
</div>

<div class="outsider">
Content here
</div>

我有一个有3个图像的精灵 - 每个用于2个子类的父级，最后一个用于“局外人”类。

我可以尝试给这样的CSS：

.parent{
  background-image: url("../img/4-in-one-sprite.png");
}
.child-1{
  background-position: 0px -10px;
  width: 10px;
}
.child-2{
  background-position: 0px -20px;
  width: 10px;
}
.outsider{
  background-position: 0px -30px;
  width: 10px;
}

由于局外人不属于父母，因此不会得到那个背景，对吧？因此，我还必须在其类定义中重新指定相同的背景图像，如下所示：

.outsider{
  background-image: url("../img/4-in-one-sprite.png");
  background-position: 0px -30px;
  width: 10px;
}

我的怀疑是：

浏览器是否会为外人类提出额外的图像请求？想象一下，图像没有被缓存，而是第一次加载该页面。
或者浏览器会以某种方式智能地理解其相同的资源并且只能完成一次呼叫吗？
当我们提供背景图片时，在呈现页面的哪个阶段，浏览器是否请求资源？是在解析css时还是在将它们绘制到dom上时？
在这里使用sprite的最佳方法是什么，将http调用减少到最低限度而不将第3个图像分开？

Answer 1

background-position仅适用于元素的background-image，这不是继承的内容（您不必在每个子元素上添加background: none以停止级联并具有相同的内容父母，孩子，孙子元素的背景一遍又一遍？）。

所以你在这里发生了3次background-image，一次是局外人，一次是针对孩子的，一次是针对每个孩子的2次（后者有一个拼写错误）。和位置的3对不同的值。

浏览器只会请求每个唯一资源一次，不要担心，但CSS，JS，图像，延迟，异步等资源加载的顺序可能会有所不同。 Err确实有所不同。

使用精灵的最佳方法是知道何时不使用它们：当您使用带有alt属性的HTML图像时，请不要使用它们。

最后，你缺少一个重要的属性：background-repeat。重复的没有精灵（你会立刻看到所有的精灵）。需要no-repeat，repeat-y和repeat-x 3个不同的精灵。

Answer 2

这样做的一个非常好的方法是仅对这些元素使用名称“sprite”..

然后在css中使用类似的东西：

[class^="sprite-"], [class*=" sprite-"] {
    background:transparent url("../img/4-in-one-sprite.png") no-repeat;
}

所以，“。sprite-outsider”和“.sprite-child-1”都会将精灵作为背景，只需要对它们进行定位..

在ie6中不起作用，但现在如何关心？ ;）

而且，通过这个，浏览器很聪明！

单个CSS精灵，用于2个不同的类。这是一个很好的方法吗？

2 个答案: