它是如何完成的 - 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; 
} 

此背景对齐（成长）锚和左侧右侧方被切碎了。 这样，实际上有两个图像在彼此的顶部，右侧在左侧顶部（但它们实际上是精灵的相同部分）。该数字只能增长到原始精灵的宽度，否则将会显示锚背景的左侧（顶部）。