拉伸图像作为背景答案

【问题标题】：Stretch image as background拉伸图像作为背景
【发布时间】：2010-11-09 21:37:33
【问题描述】：

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

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

【问题讨论】：

标签： html css image background

【解决方案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 编码？

祝你好运，

马特

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

您可以使用没有高度和宽度属性的老式 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），但它可以工作。

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：