如何拥有非固定的全屏背景图像？答案

【问题标题】：How to have a non-fixed fullscreen background image?如何拥有非固定的全屏背景图像？
【发布时间】：2011-10-09 03:45:32
【问题描述】：

我知道several techniques 存在具有全屏背景图像，使用 CSS3 或绝对定位和 100% 高度/宽度。

但是，所有这些技术都会导致固定的背景图像，这意味着如果您有一些大于屏幕的内容需要滚动条，则滚动时背景图像将保持固定。

是否可以将背景图片拉伸到页面的宽度/高度，而不是屏幕？

【问题讨论】：

标签： html css background fullscreen stretch

【解决方案1】：

我在构建全屏幻灯片时遇到了同样的问题：固定位置使图像在滑动包含元素时保持在原位，而不是让它们与该元素一起滑动...

我使用those techniques尝试了很多解决方法：

纯 CSS 技术 #1：在将位置设置为相对位置时效果很好，但不会使图像垂直居中。

Awesome, Easy, Progressive CSS3 Way : 我之前尝试了所有的可能性都徒劳无功地意识到不填充位置值是有效的（真的很棒）！

html { 
    background: url(images/bg.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

【讨论】：

【解决方案2】：

我会将您指向backstretch jQuery plugin 以将此功能添加到您的页面。链接页面显示了内容如何保持固定并根据浏览器的宽度/高度进行缩放。

编辑

我不太确定如何实施这样的解决方案；我认为您可能必须使用 javascript，因为在加载内容之前您无法确定内容的大小。以下是我的尝试：

计算加载后的内容大小
将背景图像的拉伸设置为内容大小
将一些重复此操作的函数绑定到任何浏览器大小更改

我不太确定它在性能方面的感觉如何，但这种技术的一个缺点可能是，除非您对内容设置大小限制，否则您可能必须使用非常大的图像来覆盖所有情况。

【讨论】：

这是我已经知道该怎么做的了。我正在寻找的是将背景拉伸到页面，而不是屏幕。在您提出的脚本演示中，您可以看到滚动时背景图像不会移动。我希望它移动，即像页面的其余部分一样。

【解决方案3】：

这种方法的问题在于，您永远无法猜测您的内容将获得多大； 1000 像素？ 10,000 像素？想象一下，如果你决定使用一个很大的图像，它会减慢你的页面加载速度，或者如果你决定使用一个合理大小的图像，它会在超出其边界时非常严重地扭曲。

以此为例，相应地增加内容数量，看看背景图像如何变形：http://jsfiddle.net/andresilich/75Sfp/

【讨论】：

我知道图像大小造成的失真和问题。但是您可以想象这样一种情况，您知道您的内容有时会比屏幕大，但不会大 100 倍。
那么您希望背景图像的表现如何？与页面的内容一起拉伸？还是根据页面内容按比例增加大小？
我想让它伸展。如果有点变形也没关系。就像在您的示例中一样，但对于整个页面而不仅仅是一个 div。
但整个页面是主视口？还是页面中心的容器？它基本上是相同的方法，唯一的区别当然是您将使用更大的图像来拉伸内容。

【解决方案4】：

假设您想要在您的网站中使用可变图像大小的标题（占据整个高度）

在您的标题中添加一个 ID 或类，使用您想要的任何命名。

我会把它当作 (id="test")

现在，转到链接的 JS 文件并粘贴此..

var x = screen.availHeight + "px";
console.log(x)

document.getElementById("test").style.height = x;

【讨论】：