-1

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

我的疑问是：

  1. 浏览器不会为局外人类发出额外的图像请求吗？想象一下图像没有被缓存并且它是该页面的第一次加载。

  2. 或者浏览器会以某种方式智能地理解其相同的资源并且总共只进行 1 次调用？

  3. 当我们提供背景图片时，在渲染页面的哪个阶段，浏览器会请求资源？是在解析 css 时还是在将它们绘制到 dom 上时？

  4. 在不单独放置第三张图片的情况下，在这里使用 sprite 并将 http 调用减少到最低限度的最佳方法是什么？

4

2 回答 2

1

background-position仅适用于background-image元素，这不是继承的东西（您不必添加background: none每个子元素以停止级联并一遍又一遍地与父、子、孙子元素具有相同的背景，不是吗？ ）。

因此，您在background-image这里出现了 3 次，一次为局外人，一次为 child-1，每个 child-2 一次（后者有错字）。以及 3 对不同的位置值。

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

使用精灵的最好方法是知道什么时候不使用它们：当你应该使用带有属性的 HTML 图像时不要使用alt它们。

最后，你缺少一个重要的属性：background-repeat. 没有重复的精灵（你会一次看到所有的精灵）。的 3个不同的 spriteno-repeat和一个是必需的。repeat-yrepeat-x

于 2013-03-05T19:44:25.443 回答
0

一个非常好的方法是仅在这些元素上使用名称“sprite”。

然后在css中使用这样的东西：

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

因此，“.sprite-outside”和“.sprite-child-1”都将精灵作为背景，只需要在它们上面定位。

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

而且，是的，浏览器很聪明！

于 2013-03-05T19:39:23.950 回答