html - 固定拉伸(stretch)背景图像

Question

我已经起草了一个简短的示例，说明我目前所拥有的以及我正在努力实现的目标。

查看我的演示 here

在我的 jsfiddle 中，您将看到一个名为“content-wrap”的包装 div。在这个 div 中，我想要一个可以拉伸(stretch)到窗口大小和内容的图像。

我之前做过背景图片拉伸(stretch):见例子here

但这有点复杂，因为它针对站点内的特定区域。

到目前为止，我已经尝试使用上面链接中的现有代码进行游戏，我认为我可能需要采取不同的方法。当您向下滚动时，图像不会停留在原位，它会随着滚动条移动(应该如此)。

有什么想法吗？

Answer 1

如果您不介意使用 CSS3 的 background-size 属性，那么对您的 #content-wrap { CSS 语句添加以下内容将实现响应式背景图像将扩展以适应容器的大小。

#content-wrap {
    height: 1000px;
    background: #ccc;
    color: #fff;

    /* Added CSS */

    display: block;
    max-width: 100%;
    clear: both;
    background: transparent url("http://placekitten.com/900/900") top right no-repeat;
    background-size: cover;
}

这是你的 jsfiddle 的更新版本，其中包含我添加的 CSS 和一些可爱的 placekittens: http://jsfiddle.net/kztGj/22/

缺点当然是它不能在 Internet Explorer < 9、Firefox 3.6 或任何不支持 CSS3 的浏览器中运行。但是随后您要求响应式图像，因此您将很难找到支持旧版浏览器的优雅解决方案。

有关 background-size 属性及其用途的更多信息，我建议查看 this article ，信息量很大。