2

我需要将图像拉伸为页面背景。页面是否不能很好地缩放并不重要，无论屏幕分辨率如何，整个图像都必须在屏幕上可见。我在 Google 上找到了一些解决方案，但它在 Firefox2 或 IE6 或两者中都不起作用，我也需要这两个。我讨厌人们不升级他们的软件，但我仍然在谷歌分析数据中看到这些浏览器访问网页，尤其是 IE6。

有没有好的跨浏览器解决方案？

4

4 回答 4

7

您可以使用没有高度和宽度属性的老式 img 标签。在您的 CSS 中，将其绝对定位为低 z-index，将高度和宽度设置为“100%”。

将页面上的其他所有内容放在另一个具有更高 z-index 的 div 中

像这样：

<style type="text/css">
#stretchy {
    postion: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}
#everything_else {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
}
</style>

...

<img src="/images/myimage.jpg" id="stretchy" />

<div id="everything_else">
    ...
</div>

有关示例，请参见http://axoplasm.com/lost.html 。

它不完全是“背景图像”（可能不是符合 W3C 标准的 CSS），但它可以工作。

于 2009-07-11T04:17:55.930 回答
3

我不想劫持这个问题，但如果你有这个代码：

background-image: url('images/background.gif');
background-size: 100%;

这会在所有当前浏览器（IE、FF、GC、SF、OP）中重复图像，虽然在所有浏览器中都无法正常工作，但与 z-index 深度方法不同（我有一个复杂的前景）。

但是，如果浏览器突然获得 bg-size CSS3 支持，CSS3 规范是否说明会发生什么？它应该拉伸图像还是做它一直做的事情并重复？

于 2009-12-08T12:14:54.867 回答
1

这在 CSS1 或 CSS2 中是不可能的，但在 CSS3 中是可能的：requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/

但是，这对 IE6 不可用。

另一种方法是使用后台重复，或者这个网站有一些可能有效的东西（我没有检查它是否有效）：webdesign.about.com/od/css3/f/blfaqbgsize.htm

我知道你说用户不升级浏览器是什么意思，但是你什么时候停止为 IE5 甚至 IE4 编码？

祝你好运，

马特

于 2009-07-11T01:16:55.013 回答
1

一个不错的选择是使用淡出为图案或纯色的“静态图像”。这样，您仍然可以获得背景图像（无论您想要多大）和可扩展性。

在 CSS3 中，您可以使用 background-size: 100%;

Firefox 3.5 支持一些 CSS3 属性，但我不相信它们支持一切……（我认为）。

于 2009-07-11T01:24:15.673 回答