使用background-repeat和background-repeat作为CSS精灵

Question

Here is the demo，这是精灵：

我想在标记中使用箭头，如下所示：

<div class="tooltip">
    The tooltip
    <span class="arrow"></span>
</div>

环境：

background-image: url(foobar.gif);
background-position: 0 -40px;
background-repeat: none;

似乎不起作用（如预期的那样）。任何解决方法？

Answer 1

你的意思是：

background-repeat:no-repeat？

Answer 2

准确使用高度和宽度..

例如，

background-position: 0 -40px; 
background-repeat: no-repeat;
height:32px;
width:32px;

或在线使用sprite生成器，它们将渲染图像和css ..

例如：http://spritegen.website-performance.org/

Answer 3

嗯试试这个：

background: url(foobar.gif) 0 -40px no-repeat transparent;

应该工作。