使用背景重复背景位置的CSS精灵

问题描述：

sprite

我想用箭头标记，像这样：

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

设置：

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

似乎不工作（如预期）。任何解决方法？

span.arrow如何获得高度和宽度？正如你的代码所代表的那样，因为它是一个空的内联元素，它不会有任何尺寸，并且你不会看到背景图片。 – 2011-04-25 10:10:30

@Andy：我已经设置了演示。我宁愿不在宽度上设置宽度，因为我需要跨度上的顶部边框。 – 2011-04-25 10:16:11

答

你的意思是：

background-repeat:no-repeat？

这真是愚蠢的我。我更新了小提琴，它甚至可以在IE6上运行。 – 2011-04-25 10:22:12

答

使用高度和宽度完全相同..

例如，

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

或使用精灵发电机在线，他们将呈现图像和CSS ..

答

hm试试这个：

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

应该工作。