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

Question

看一下以下场景：

通常你会包含背景图片并将其设置为' right center '。然而，有没有这个，但是有一个sprite（包含多个不同的图像）的语音气泡，其中元素的宽度未知？

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

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

有人对此有任何想法吗？

由于

Answer 1

您可以使用css伪元素，例如：before或：after。只需将伪元素的大小和位置放在您想要的位置即可。内容属性很重要，否则它不会出现。

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