Question

我有两个图像在一个 - 宽度是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;

但没有任何成功。

我们将不胜感激。感谢

Answer 1

.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。

Answer 2

要使悬停按钮像这样工作，请特别调整元素的大小以包含单个图像，然后仅覆盖background-position以偏移背景映射。它需要2个参数 - X偏移和Y偏移。要将背景向上推，您需要将Y值偏移以使其“高于”图像：

.menuClass:hover {
    background-position:0 -24px;
}