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