两个不同类的单个CSS精灵。这是一个好方法吗？

我试图通过在我的项目中使用sprite映像来减少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>

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

因为外人不属于父母，所以他们不会有这样的背景，对吗？因此，我还必须在其类定义中重新指定相同的背景图像，如下所示：

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

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

.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时，还是在将css绘制到dom上时

在这里使用sprite并将http调用减少到最低限度而不将第三个映像分开的最佳方法是什么

---

一个很好的方法是只在这些元素上使用“sprite”这个名称

然后在css中使用如下内容：

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

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

在ie6中不起作用，但现在怎么关心

---

而且，通过这一点，浏览器是智能的

背景位置

仅适用于元素的

背景图像

，这不是继承的（您不必在每个子元素上添加

背景：无

，以停止层叠，并与父元素、子元素、孙子元素反复使用相同的背景，不是吗？）

因此，这里出现了3个

背景图像

，一个用于局外人，一个用于child-1，每个child-2（后者有一个输入错误）。和3对不同的位置值

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

使用精灵的最佳方法是知道何时不使用它们：当您应该使用带有

alt

attibute的HTML图像时，不要使用它们

---

最后，您缺少一个重要属性：

backgroundrepeat

。没有用于重复的精灵（您将一次看到所有精灵）。3个不同的精灵分别用于

无重复

、

重复-y

和

重复-x

是必要的。

因此，如果我将背景图像提供给外部类以使用同一图像，应该没问题——浏览器不会进行额外调用。是吗？他是这么说的：“浏览器只会对每个唯一的资源请求一次”我很抱歉。我不觉得根据他们使用的图片来定义类名很有吸引力。我认为你不理解这篇文章。“基于他们使用的图像”？如果你有一个精灵，如果你多次声明它，那它就是一个混乱的css。。你可以给它取任何你想要的名字……）