如何给css精灵效果？

我是css精灵的新手，我不知道如何在hover中更改图像。我想我唯一的一个图像被改变，这是“滚动到顶部”的网站。我正在尝试这种编码，但它不工作。图片链接如下：

---

这里有一些问题

首先，您将

#toTop

设置为

display:none

，因此它不会以任何背景显示

其次，您似乎试图在悬停时将背景图像向左移动，而不是按照图像构建的方式向上/向下移动

第三，使用填充，在大多数浏览器中，除非您使用

框大小：边框框，否则您的高度/宽度将被忽略（包括高度和宽度中的填充和边框）

So（消除冗余属性）：

示例：
谢谢，但在Firefox中它似乎不好用。当我悬停图像时，第二个图像将无法正确替换它。在Firefox中添加了
-moz box size
属性以更正框大小
#toTop {
    background:url(img/scroll-to-top-2.png)no-repeat;
    background-position:0px -50px;
    width:50px;
    height:50px;
    padding: 5px 3px;
    overflow:hidden;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    cursor:pointer;
    z-index:600;
    text-decoration:none;
    border:medium none;
}

#toTop:hover {
    background:url(img/scroll-to-top-2.png)no-repeat left -29px;

    width:50px;
    height:50px;
    padding: 5px 3px;
    overflow:hidden;
    position: fixed;
    display: none;

}

#toTop {
    background: url(http://i.imgur.com/TM6kIqm.png) no-repeat;
    background-position: 0px -50px;
    width: 50px;
    height: 50px;
    padding: 5px 3px;
    -moz-box-sizing: border-box;   
    box-sizing: border-box;
    overflow: hidden;
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 600;
    text-decoration: none;
    border: none;
}

#toTop:hover {
    background-position: 0 0;
}