Question

我是css sprites的新手，我无法理解如何在悬停时更改我的图像。我希望我的唯一一张图片是“Scroll To Top”网站。我正在尝试这种编码，但它无法正常工作。图片链接如下：

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

}

Answer 1

这里有一些问题。

首先，您将#toTop设置为display: none，因此在任何背景下都不会显示。

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

第三，使用填充，在大多数浏览器中，除非使用box-sizing: border-box;（包括高度和宽度中的填充和边框），否则您的高度/宽度将被抛弃。

所以（消除冗余属性）：

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

示例：http://codepen.io/paulroub/pen/vDBaA

如何给css sprites效果？

1 个答案: