有谁知道我可以有一个具有百分比宽度的 CSS 翻转图像以便它随页面大小缩放的方法？
我认为我无法使用此处显示的方法http://www.vision.to/css-only-single-image-fast-rollover.php因为它将图像精灵设置为背景图像。
我见过的唯一其他 CSS 方法在这里：http
://thefiles.macadamian.com/2008/06/pure-css-image-rollover-without.html
我喜欢这种方法，但想知道是否可以使用一个图像精灵，而不是必须单独加载图像。
对不起，如果我听起来很含糊，每当我读到这些问题时，我总是认为写这些问题的人没有正确地描述它们的意思，现在我已经开始这样做了，我自己也没有更好哈哈。谢谢你的帮助 ：）
我不明白你怎么能用精灵做到这一点。它们是通过将大图像设置为元素（通常是 DIV）的背景来完成的，然后更改位置以便仅显示图像的所需部分。不同的DIV可以通过改变背景图像的位置来显示图像的不同部分。
但是，您不能缩放背景图像。它们始终以 1:1 显示。你可以让它们在元素内重复，也可以不重复，但你不能缩放它们，所以精灵的想法已经过时了。
如您发布的链接所示，使用单独的图像进行操作非常简单。
为翻转预加载图像非常简单。只需包含一个带有 CSS 设置的图像标签即可隐藏图像：
<img src='myrolloverimage.jpg' style='visibility:hidden; display:none;' />
如果您不需要支持 IE8 及更早版本，您可以使用background-size带有百分比值的 CSS3 属性。
与前景图像一样，精灵文件很可能不是一个合理的选择。缩放图像时，精灵文件会增加复杂性。这background-position是基于图像的缩放大小，使用百分比值获得准确的位置是有问题的。