有谁知道一种方法，我可以让 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
我喜欢这种方法，但想知道是否可以使用一个图像精灵而不是单独加载图像。
对不起，如果我听起来很模糊，每当我读到这些问题时，我总是认为写这些问题的人没有正确描述他们的意思，现在我已经开始这样做了，我自己也没有更好哈哈。 感谢您的帮助:)
【问题讨论】：
标签： css image width percentage rollover
我不明白你怎么能用精灵做到这一点。它们是通过将大图像设置为元素（通常是 DIV）的背景，然后更改位置以便仅显示图像的所需部分来完成的。不同的DIV可以通过改变背景图片的位置来显示图片的不同部分。
但是，您无法缩放背景图片。它们始终以 1:1 显示。你可以让它们在元素中重复，也可以不重复，但你不能缩放它们，所以精灵的想法已经过时了。
如您发布的链接所示，使用单独的图像非常简单。
为翻转预加载图像非常简单。只需包含一个带有 CSS 设置的图像标签即可隐藏图像：
<img src='myrolloverimage.jpg' style='visibility:hidden; display:none;' />
【讨论】：
如果您不需要支持 IE8 及更早版本，您可以使用带有百分比值的 CSS3 background-size 属性。
与前景图像一样，精灵文件很可能不是一个合理的选择。缩放图像时，精灵文件会增加复杂性。 background-position 是基于图像的缩放大小，使用百分比值获得准确的位置是有问题的。
【讨论】：