Question

是否可以将CSS精灵用于“前景”图像 - 即用户应该点击并与之交互甚至打印的图像？

而不是使用CSS background-image属性。你会用什么？

Answer 1

您可以使用标准<img />标记并将其放入容器（如<div />）中，其高度/宽度有限。然后使用相对定位或负边距来控制图像的位置。

Answer 2

你可以用这样的CSS来做到这一点：

.myClass { background: url(../Images/Sprite.png) no-repeat; 
           height: 20px; 
           width: 40px; 
           background-position: -40px 0; 
           display: block; } 
.myClass:hover { background-position: -40px -20px; }

无论班级class="myClass"是什么，其中只有图像，没有别的。无论您想要什么，这可以是<a>和<input>或普通<div>。

这是一张背景图片......但它是你正在看的元素，没有任何东西在那个背景前面。仅仅因为你对属性使用background-image并不意味着它不是前景元素......就像你可以点击的按钮一样。你可以这样做：

<input type="button" class="myClass" />

Answer 3

背景图片无法处理的一个主要要求是ARIA。所有ARIA要求都会拒绝使用背景图片来获取有意义的，导航的和其他信息性的信息。使用屏幕阅读器必须代表残疾用户解释。能够在必要时替换img标记的背景图像css语句和一些ARIA标记是当前受监管开发环境中的一个关键特性。

原始问题的答案是是！可以使用css后台语句中显示的图像。但是你必须在图像编辑器中打开精灵图像并选择代表你想要的精灵的部分，并将其保存为单独的图像并在img标签中引用它。

挑战在于，这些情况经常出现在预先构建的控制库中。查找和更改库中选择和显示背景图像的代码有点困难，更改代码很难！

Answer 4

我已经使用img标签解决了这个问题，并在我的css中使用了object-fit和object-position属性。这是我使用的html和css的示例： -

HTML

<img src="<your image source>" class="sprite-icon sprite-icon-1 " />

CSS

.sprite-icon {
  height: 20px;
  width: 20px;
  object-fit: none;
}

.sprite-icon-1 {
  object-position: 0 0;
}

.sprite-icon-2 {
  object-position: -20px 0;
}

显然，您需要根据您使用的精灵更改位置和大小参数。有关完整的工作示例，请查看此fiddle

Answer 5

你可以这样做，但你必须使用精灵的背景图像，因为你必须能够设置位置。这可以用于链接或任何你想要的。看看Googles精灵，他们将它用于iGoogle上的按钮：http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif

CSS Sprites - 不仅适用于背景图片？

5 个答案: