Html 如何制作CSS滚动图像？（雪碧）

我只是想用我在一本网页设计杂志上看到的这个小把戏来做一个小小的图像翻转，但是我遇到了一点小麻烦。我的尝试是一个可怕的失败lol。我只想看到上半部分（42px高），然后是下半部分的翻滚（-42px明显）

宽度也是42px。有人能写点什么来实现这一点吗？ 图片： 试试这个：

<style type="text/css">
.menu {
}
.menu a {
    float: left;
    display: inline;
    width: 42px;
    height: 42px;
    text-decoration: none;
}
.menu a span {
    display: block;
    overflow: hidden;
    height: 0;
}
.menu .home {
    background: transparent url(http://img826.imageshack.us/img826/6568/homebi.png) 0 0 no-repeat;
}
.menu .link:hover {
    background-position: 0 -42px;
}
</style>

<div class="menu">
    <a href="#" title="Home" class="link home"><span>Home</span></a>
</div>

.菜单{
}
.菜单a{
浮动：左；
显示：内联；
宽度：42px；
高度：42px；
文字装饰：无；
}
.菜单{
显示：块；
溢出：隐藏；
身高：0；
}
.菜单.主页{
背景：透明url(http://img826.imageshack.us/img826/6568/homebi.png)0 0不重复；
}
.菜单.链接：悬停{
背景位置：0-42px；
}

以下是图像滚动的基本内容

css

.rollover{display:block; height:42px; width:42px; background:url(http://img826.imageshack.us/img826/6568/homebi.png) top;}
.rollover:hover{background-position:bottom;}
.rollover span{display:none}

html

<a href="#" class="rollover"><span>Home</span></a>

重要的部分是背景位置，当您滚动背景位置为“底部”时，按钮上的“正常状态”设置为“顶部”

---

假设包含两种按钮状态的图像为84px高，这将正常工作。

这是关于

背景位置的初始值（非
：hover
）和最终值（
：hover
）

#test {
    height: 42px;
    width: 42px;
    background-image: url(http://img826.imageshack.us/img826/6568/homebi.png);
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: top;  /* <-- key step #1 */
}
#test:hover {
    background-position: bottom; /* <-- key step #2 */
}

#测试{
高度：42px；
宽度：42px；
背景图片：url(http://img826.imageshack.us/img826/6568/homebi.png);
背景重复：无重复；
背景色：透明；
背景位置：top；/*嘿，Matt，这是我见过的最好的滚动实现。很好，很简单。我喜欢“顶部”和“底部”的定位，几乎是万无一失的。@Mike:谢谢！我想避免
背景：…
速记会更清晰。希望它能显示出你所需要的最小值。这很完美。：）但是这里的一个小问题是，我该如何使它成为一个链接？在这种情况下，它是合适的，但如果您使用的是真实的精灵图像（不仅仅是同一图像的两种状态）你不能完全依赖于上/下定位。固定的像素位置imho更适合于更通用的图像approach@Lucius：你完全正确，但我想让它尽可能简单明了，因为OP说以前的尝试根本不起作用。此外，如果你要使用“real”sprite图像，正如您所说，如果有两个以上的图像，那么您很可能根本不会手动创建图像和CSS，而是使用图像+CSS生成器。