html - CSS-如何设置背景:在其下方放置2张图片以产生悬停效果？

我有两个图像-宽度为16像素，高度为24像素（因此每个图像均为16x12像素）。
我想首先显示上面的图像-我这样做是这样的：

background: url('image.png') left 0px top 12px  no-repeat;

这很好。
但是现在当我将它们悬停在菜单项上时，我想隐藏上方的图像，而不是显示下方的图像-这就是我不知道如何设置的图像。我试过了：

background: url('image.png') left 0px top 0px bottom 12px  no-repeat;

要么

background: url('image.png') left 0px bottom 12px  no-repeat;

但是没有任何成功。

每个建议将不胜感激。谢谢

最佳答案

.menuclass:hover {
     background: url('image.png')  0px -12px no-repeat;
}

为了使这一点更清楚，我通常将其键入为

.menuClass:hover {
     background: url('image.png');
     background-position: 0 -12px;
     bacakground-repeat: no-repeat;
}

精灵的坐标如下

0 0在左上方。

-16px 0在右上方

-16px -24px在右下角

0 -24px是左下角

因此，要获得第二个（底部）图像，只需使用0 -16px

0表示您在精灵的最左侧。然后-16px表示您要从顶部开始-16px。

关于html - CSS-如何设置背景:在其下方放置2张图片以产生悬停效果？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21104441/