Question

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

这有很好的跨浏览器解决方案吗？

Answer 1

你可以使用一个很好的老式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），但它确实有效。

Answer 2

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

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

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

然而，如果浏览器突然获得bg大小的CSS3支持，那么CSS3规范是否会说会发生什么？它应该拉伸图像还是做它总是做的事情并重复？

Answer 3

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

但IE6无法使用此功能。

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

我知道你对没有升级浏览器的用户意味着什么，但是你在什么时候停止编写IE5，甚至是IE4？

祝你好运，

马特

Answer 4

一个很好的选择是使用淡化为图案或纯色的“静态图像”。这样你仍然可以得到你的背景图像（无论你想要多大）和可扩展性。

在CSS3中，您可以使用background-size：100％;

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

作为背景的舒展图象

4 个答案: