Question

我的3个按钮位于彼此之下，但是当我将鼠标悬停在浏览器中的图像上时，底部按钮会消失。从顶部开始的按钮是正常按钮，悬停，以及选择按钮时。任何人都可以帮助使我的按钮与此类似，我使用此代码，它仍然无法正常工作。提前致谢！：d http://www.icondeposit.com/blog:custom-css-button-sprite

按钮：https://www.dropbox.com/s/j9ecwlgqu8d5508/button-2.png

这是我的css代码，

.GoogleMarker {
    width: 1086px;
    height: 1118px;
    background: transparent url(button-2.png) 0 0px no-repeat; /* When not hovered over */
}
.GoogleMarker:hover {
    width: 1086px;
    height: 1118px;
    background: transparent url(button-2.png) 0 -503px no-repeat; /* When hovered over */
}
.GoogleMarker:active {
    width: 1086px;
    height: 1118px;
    background: transparent url(button-2.png) 0 -1004px no-repeat; /* When you press down on the icon or the icon is activated (clicked on) */
}

Answer 1

这是你问题的jsfiddle file，我是在互联网上找到的一个随机图片精灵。

只为精灵设置background-image一次，您不需要重复多次。从那时起，您唯一需要确保的是正确的background-position值。每次设置background-image时，即使您想使用相同的图像，也要再次请求图像，这是我们使用图像精灵的主要目的 - 以避免其他请求。

CSS Sprites，定位不起作用。

1 个答案: