css - CSS中的背景位置

Question

我们可以使用 2 张以上的图像进行单次导航吗？这意味着当我们将鼠标悬停在该图像上时，它将显示 6 个不同的图像。是否可以制作单个导航图像？如果可能意味着如何？

我想你们都明白这一点

替代文字 http://img714.imageshack.us/img714/2786/mubeen.gif

Answer 1

如果我理解正确，您希望在将鼠标悬停在一个按钮上时不断更改背景图像的位置。

如果那是正确的，那么我建议将静态图像作为背景图像并在悬停时将图像更改为 GIF 动画图像

Answer 2

您（目前 - 跨浏览器）只能在一个元素上设置一个 bg 图像。如果您想在悬停或其他任何情况下更改它，只需添加一个带有set on的a-tag ：href#

<a class="img" id="thatoneimg" href="#"></a>

然后在css中：

一个.img {
  宽度：100px；
  高度：100px；
}
一个#thatoneimg {
  背景图片：url（staticimg.jpg）；
}
一个#thatoneimg：悬停{
  背景图片：url（movingimg.gif）；
}

这应该可以跨浏览器工作。您需要a-tag 才能在 IE 中工作。

编辑：正如 Starx 所说，只需将第二张图片制作为带有动画的 .gif。它不会使用精灵，但它会工作。

Answer 3

如果我的问题是正确的，那是可能的，但是您必须有 6 个不同的 HTML 元素才能在 6 个不同的位置包含背景图像。