Div/span和精灵图是什么？

Question

我正在将我的网站上大多数的内联图片替换为精灵图。

精灵图类将包含一些基本的 CSS：

.sprite{
background-image:url(...);
background-position:...;
width: 16px;
height:16px;
}

我看到在锚点标签内嵌套div并不是一个好主意。

<a><div class="sprite"></div></a>

我尝试将精灵添加到span元素中。

<a><span class="sprite"></span></a>

但是span元素不会按照我设置的宽度和高度进行扩展。能够使用span元素替换图片标签成为精灵图将非常有用。我可以在span元素中添加一个空白gif图片来扩展它。但这样做将违背我使用精灵图的原因（减少http请求的数量）。

在锚点标签内部使用div元素是不正确的。

那么如何在锚点元素内使用精灵图呢？

并且，总是存在对齐div的问题。如果一个图片在另一个元素中居中，我该如何用精灵图替换它？

- reggie

---

不要使用精灵图作为内容图片。这会牺牲清晰的语义、可访问性和可维护性。减少HTTP请求的数量并不是那么重要。 - Quentin

@David：这不取决于图像的数量和大小吗？但我同意这是一个代价高昂的权衡。 - Eric Mickelsen

Answer 1

你需要在默认为内联元素的元素上声明display: block;，类似于以下代码：

.sprite{
    display: block;
    background-image:url(...);
    background-position:...;
    width: 16px;
    height:16px;
}

这应该可以使 span 元素扩展到您所需的宽度/高度。

希望这能帮到您！

- Valentin Flachsel

---

我们能否为像span这样的内联元素添加width或height，或者我们只能通过使用display: block将其转换为div？ - Swanand

你只需要将它转换为一个 div。 - Kyle

是的，您可以向span添加宽度和/或高度属性，但除非更改其行为（即display:block;），否则它们将被忽略。不，该元素并没有被“转换”——它仍然是一个span——而是其默认行为正在被更改，并且它将像div一样运作。希望这讲得通。 - Valentin Flachsel

这解决了在锚标签中不使用div元素的问题。但它仍然带来了一个问题，即如何将图像居中在父元素中。 - reggie

由于元素具有固定的大小，因此您始终可以相对于元素的左上角以像素为单位定义背景的位置并手动将其居中。但是，无法通过CSS裁剪精灵的一部分以便在更宽和/或更高的元素中使用它作为背景，而唯一的解决方案（仅适用于非重复背景）是在该精灵的右下侧留出足够的空白空间，以便清除其元素的右侧和底部边距。 - Valentin Flachsel

无论如何，如果你想听我的真实意见，除非你正在做需要使用图片的圆角，否则仅仅为了背景使用精灵图并不值得麻烦，更不用说在某些情况下（比如重复的背景）根本不可能。 - Valentin Flachsel

Answer 2

你可以将 span 元素的显示属性设置为 inline-block。

.sprite{
  background-image:url(...);
  background-position:...;
  width: 16px;
  height:16px;
  display: inline-block;
}

这样，具有类名为.sprite的元素将接受width和height属性，并且还会像inline元素一样起作用。

- Ahmed Attia