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

Question

看看下面的场景：

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

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

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

有人对此有任何想法吗？

谢谢

Answer 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: ' ';
}