如何将背景图像设置为右中心并仍然使用精灵？答案

【问题标题】：How to set a background image to right center and still use a sprite?如何将背景图像设置为右中心并仍然使用精灵？
【发布时间】：2012-05-21 13:31:26
【问题描述】：

看看下面的场景：

通常您会包含背景图像并将其设置为“right center”。无论如何，是否有这个但语音气泡来自元素宽度未知的精灵（包含多个不同的图像）？

我正在考虑使用 :after 伪元素，但是我需要提供 IE7 支持。

我想避免额外的 HTML 标记，因此我很好奇是否存在纯 CSS 场景。

有人对此有任何想法吗？

谢谢

【问题讨论】：

取决于你的精灵，我想。如果它包含每个下方的所有图标，请阅读您的图像窄但非常高，这应该不是问题。除此之外，您可能想查看背景图像剪辑，但我不确定 IE7 在那个上。
YouTube 使用通用修复，只是一个 1 像素的透明 gif 被拉伸以适合所需图像的宽度，然后应用精灵图像并使用 CSS 定位它。我个人认为如果你想避免添加额外的标记，@digitalclubb's 可能会更好。

标签： css sprite css-sprites pseudo-element

【解决方案1】：

您可以使用 css 伪元素，例如 :before 或 :after。只需调整您的伪元素的大小并将其放置在您想要的位置即可。 content 属性很重要，否则不会显示。

#divid:after {
  width: 10px;
  height: 10px;
  margin: -10px 0 0 -10px;
  position: absolute;
  background: url('sprite.png') -20px -15px no-repeat;
  content: ' ';
}

【讨论】：

我很想走这条路，但 :after 在 IE7 中不支持（我必须支持）。想我只需要在我的标记上粘贴跨度:(
@digitalclubb 你也可以使用 Modernizr，它们支持 CSS 生成的内容。需要一些额外的工作，但可以节省时间。