css - 怎么做-鸣叫按钮计数器的缩放

我想知道如何（在CSS方面）实现带有Tweet-Button之类的计数器元素的Button。呼出人数似乎随着数字的增加而增加。 http://platform0.twitter.com/widgets/images/tweet.png使用的backgrund精灵具有比在基本（即一位数字）按钮中可见的明显更大的标注。

任何帮助是极大的赞赏！

最佳答案

关键是要使用正确的背景位置。
它们使用两个元素：

<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;
}

该背景与（不断增长的）锚点的右侧对齐，而左侧被切掉。
这样一来，实际上有两个图像彼此重叠，右侧位于左侧上方（但它们实际上是精灵的同一部分）。该数字只能增长到原始精灵的宽度，否则锚背景的左侧（顶部）将可见。