使用背景重複背景位置的CSS精靈

sprite

我想用箭頭標記，像這樣：

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

設置：

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

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

2011-04-25 Salman A

span.arrow如何獲得高度和寬度？正如你的代碼所代表的那樣，因爲它是一個空的內聯元素，它不會有任何尺寸，並且你不會看到背景圖片。 – 2011-04-25 10:10:30

@Andy：我已經設置了演示。我寧願不在寬度上設置寬度，因爲我需要跨度上的頂部邊框。 – 2011-04-25 10:16:11

你的意思是：

background-repeat:no-repeat？

2011-04-25 10:16:41

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

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

例如，

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

或使用精靈發電機在線，他們將呈現圖像和CSS ..

2011-04-25 10:26:48 Vijay

hm試試這個：

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

應該工作。

2011-04-25 12:40:22

回答