Html CSS如何处理大量的sprite而不必创建新的CSS类

我有一个图像列表（大约30个），我想创建CSS精灵，以便它们在悬停时着色。所有图像的大小都相同。问题是，如果我只想拥有一个css类，我必须将背景图像放在内联html上，如下所示：

CSS:

HTML:

...

---

而且它不起作用。如果我把背景图像放在css上，我只会做sprite，但是如果我这样做，我必须创建尽可能多的css类，因为我有图像，这一点都不优雅。你有更好的主意吗？（注：我使用较少的CSS）

通常精灵用于图标，然后人们会创建一个

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

---

问题是，您将覆盖所有内联背景属性（包括-position）；使用：

---

到底是什么不起作用？你根本看不到任何图像吗？有一个css类比用内联样式混乱html更有意义。精灵的概念是有一个单一的图像，并使用背景位置来调用它。看看你的代码-你有多少精灵？所有图像的位置都相同吗？如果您可以制作一个JSFIDLE或codepen示例，也许我们可以调试您的问题。@fast“扩展类进行图标的自定义。”这允许覆盖

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

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

style="background-image: url('image1');"