Question

有没有人知道如何让背景图像缩放到它所在的浏览器窗口的尺寸？我知道CSS3允许背景宽度，但我需要更兼容的东西。

非常感谢，

埃利奥特

Answer 1

您不能使用background-image，因为它不支持大小调整。你必须通过在两个方向上放置100％伸展的img标签并使用绝对定位和z-index将其放在内容后面来伪装它。这样的事情应该有效：

<body>
    <img class="bgimage" src="bgimage.jpg" />
    <div id="content">
        Your content here...
    </div>

在CSS中：

html, body {
    min-height: 100%;
}

.bgimage {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

没有测试过，但至少应该给你一些启动器。

Answer 2

这是诀窍（来自http://css-tricks.com/how-to-resizeable-background-image/）

像这样定义你的形象：

<body id="page-body">
    <img class="source-image" src="images/image.jpg" alt="" />
</body>

和你的CSS一样：

#img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
body {
    overflow: hidden;
}

Answer 3

如果你计划有一个非常轻的屏幕，那很好但是，如果您打算使用图像作为拥挤页面的背景，我们放弃此功能的原因有以下几点：

有些浏览器很难快速渲染它：第一次，在回流和窗口调整大小时。
对于每张图片，我们不得不花费太多时间在文件大小和图片定义之间找到平衡点。随着大屏幕用户群的增长，这并不容易。
我们甚至尝试首先加载图片的低分辨率版本，而大图片正在加载。它产生了非常好的效果，但消耗了更多的浏览器资源

一旦我们放下拉伸的图像，我们的应用程序再次快速，我们停止拖延播放图片;）

可扩展的背景HTML CSS Javascript

3 个答案: