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

Question

看看下面的场景:

通常您会包含背景图像并将其设置为“居中”。无论如何，有没有这个但语音气泡来自元素具有未知宽度的 Sprite (包含多个不同的图像)？

我正在考虑使用 :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: ' ';
}