0

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

非常感谢，

艾略特

4

3 回答 3

3

你不能用 a 来做background-image，因为它不支持调整大小。您必须通过放置一个img双向拉伸 100% 的标签来伪造它，并使用绝对定位和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%;
}

还没有测试过，但这至少应该给你一些开始。

于 2010-02-04T14:36:02.513 回答
1

这是诀窍（来自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;
}
于 2010-02-04T14:39:26.873 回答
0

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

  • 一些浏览器很难快速呈现它：第一次，在回流和窗口调整大小期间。

  • 对于每张图片，我们不得不花费太多时间在文件大小和图片清晰度之间找到平衡点。随着大屏幕用户群的不断增长，这并不容易。

  • 我们甚至尝试先加载图片的低分辨率版本，同时加载大图片。它提供了非常好的效果，但消耗了更多的浏览器资源

一旦我们放下拉伸的图像，我们的应用程序又很快了，我们通过玩图片停止了拖延；）

于 2010-02-04T16:23:01.300 回答