html - CSS如何处理大量的 Sprite 而不必创建一个新的CSS类

Question

我有一个图像列表(大约 30 个)，我想创建 CSS Sprite ，以便它们在悬停时着色。图像都具有相同的大小。问题是，如果我只想拥有一个 css 类，我必须像这样将背景图像放在内联 html 上:

CSS:

.sprite{
    background-position: 0 0;
    width: 185px;
    height: 100px;
}

.sprite:hover{
    background-position: 185px 0;
}

HTML:

<div class="sprite" style="background: url('image1');">
<div class="sprite" style="background: url('image2');">
<div class="sprite" style="background: url('image3');">
...

而且它不起作用。如果我将背景图像放在 css 上，我只能设法做 Sprite ，但如果我这样做，我将不得不创建尽可能多的 CSS 类，因为我的图像根本不优雅。你有更好的主意吗？ (PS:我使用的是 Less CSS)

Answer 1

通常 sprite 用于图标，然后人们会创建一个 .icon 类并通过另一个类“扩展”它，例如 .icon.facebook。 .icon 类包含图标的所有尺寸和其他默认设置。扩展类进行图标的自定义。

.icon {
  width: ...;
  height: ...;
  display: inline-block;
  background: transparent url(...) no-repeat;
}
.icon.facebook {
  background-position: ...px ...px;
}
.icon.facebook:hover {
  // color version
  background-position: ...px ...px;
}