对CSS精灵使用background-position with background-repeat

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;

或者使用在线精灵生成器，它们将渲染图像和css。

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

Answer 3

嗯，试试这个：

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

应该是工作。