它是如何完成的 - Tweet按鈕計數器的縮放

Question

我不知道如何（CSS明智的）實現一個帶有像Tweet按鈕這樣的計數器元素的Button。召喚似乎隨着數字的增加而增長;使用的背景精靈http://platform0.twitter.com/widgets/images/tweet.png具有比在基本（即一個數字）按鈕呈現中可見的顯着更寬的調出。

任何幫助，非常感謝！

Answer 1

關鍵是要使用正確的背景位置。 它們使用兩個元素：

<span><a href=#" >1</a></span> 

將背景的跨度，它定位（根據圖像中的子畫面的位置），並指定填充用於定位數：

span { 
    background-img: url("sprite.png"); 
    background-position: 0 -50px; 
    padding: 0 0 0 5px; 
} 

這是調出的左側。 '0-50px'表示從頂部開始的精靈50px部分，使用左側0px。

下一個樣式的錨和技巧是後臺應用到元素的右側此時：

a { 
    background-img: url("sprite.png"); 
    background-position: right -50px; 
    padding: 0 5px 0 0; 
} 

此背景對齊（成長）錨和左側右側方被切碎了。 這樣，實際上有兩個圖像在彼此的頂部，右側在左側頂部（但它們實際上是精靈的相同部分）。該數字只能增長到原始精靈的寬度，否則將會顯示錨背景的左側（頂部）。