有谁知道我可以使用百分比宽度的 CSS 翻转图像,以便它随页面大小缩放的方法吗?
我想我无法使用这里显示的方法 http://www.vision.to/css-only-single-image-fast-rollover.php因为这会将图像 Sprite 设置为背景图像。
我见过的唯一其他 CSS 方法在这里:http://thefiles.macadamian.com/2008/06/pure-css-image-rollover-without.html
我喜欢这种方法,但想知道是否可以使用一个图像 Sprite 而不是单独加载图像。
抱歉,如果我听起来很含糊,每当我读到这些问题时,我总是认为写这些问题的人没有正确描述他们的意思,现在我开始这样做了,我自己也好不到哪里去哈哈。 感谢您的帮助:)
最佳答案
我不明白你如何用 Sprite 做到这一点。它们是通过将大图像设置为元素(通常是 DIV)的背景,然后更改位置以便仅显示图像的所需部分来完成的。不同的 DIV 可以通过改变背景图像的位置来显示图像的不同部分。
但是,您无法缩放背景图像。它们始终以 1:1 显示。您可以让它们在元素内重复,也可以不重复,但是您不能缩放它们,所以 sprite 的想法已经过时了。
如您发布的链接所示,使用单独的图像执行此操作非常简单。
为翻转预加载图像非常简单。只需包含一个带有 CSS 设置的图像标签即可隐藏图像:
<img src='myrolloverimage.jpg' style='visibility:hidden; display:none;' />
关于百分比宽度的 CSS 翻转帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11492213/