它是如何完成的 - 缩放按钮计数器的缩放

Question

我想知道如何（CSS-wise）实现一个带有像Tweet-Button这样的计数器元素的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;
}

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