在尝试创建精灵时，悬停图像仅显示没有悬停图像的原始图像。有任何想法吗？

Question

我试图通过复制粘贴你给userbar.php文件的代码来制作精灵。我保持CSS与上面相同。我用photoshop“保存为web - ＆gt; gif 64没有抖动”保存文件，并在文件中的两个图像之间保留一个小空间。然后我上传了它并引用了该文件。但由于某种原因，它只显示没有悬停的正常图像。我在那里做错了什么想法？ php的代码：

.myButton {
background-image: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif);
display: block;
height: 22px;
width: 22px;
} 
.myButton:hover {
background-position: x y;
}

原帖：How can I make this hover code shorter? And how can I create a css file that implements settings to more than one button?

Answer 1

尝试

.myButton:hover {
    background-position-x: -22px;
}

如果精灵是水平的，否则background-position-y。

为了更好地理解精灵，请注意this article about spites on nettuts+。

Answer 2

.myButton:hover {
  background-position: 5px 5px;
}

Answer 3

一个解决方案可能是指定see.gif中精灵的实际位置值，因为不清楚您是使用x y作为值还是仅作为上述代码段的占位符。

如果它不是占位符，那么是 - 这是你的问题。只需将x改为实际的x位置，将y改为y位置，你就可以了。