百分比宽度的 CSS 翻转帮助

标签 css image width percentage rollover

有谁知道我可以使用百分比宽度的 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/

相关文章:

javascript - 如何从 CSS 类属性创建变量?

java - java中如何获取用户的图片

xcode - 以编程方式获取 UIImageView 的宽度和高度问题

css - 移动设备上的全 Angular div

javascript - 如何使用 javascript、html 和/或 css 获取两个元素并将它们居中?

html - 为什么要使用 99.9% 而不是 100% 的 HTML/CSS 宽度?

css - 在我的画廊中裁剪图像,但它们堆叠在一起。我如何让它们彼此相邻?

android - 避免android项目中的重复资源

java - 如何在 iText 7 中用字符填充页面宽度

PHP - 在不加载图像的情况下获取有关图像(高度和宽度)的信息