Question

我知道several techniques存在全屏背景图像，无论是CSS3还是绝对定位和100％高度/宽度。

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

是否可以将背景图像支撑到页面的宽度/高度，而不是屏幕？

Answer 1

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

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

仅限CSS技术＃1：在位置设置为相对的情况下正常工作，但不会使图像垂直居中。

令人敬畏，轻松，进步的CSS3方式：我之前尝试了所有可能性，意识到没有填补位置值（非常棒）！

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;
}

Answer 2

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

修改的

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

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

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

Answer 3

这种方法的问题在于你永远无法猜到你的内容会有多大; 1000像素？ 10,000像素？想象一下，拉伸一个大的图像，如果你决定使用一个巨大的图像，它会减慢你的页面加载速度，或者如果你决定使用一个合理大小的图像，如果它超出它的边界，它将会非常扭曲。

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

Answer 4

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

在标题内添加一个ID或类，其中包含您想要的任何命名。

我将其视为（npm install）

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

id="test"

如何获得非固定的全屏背景图像？

4 个答案: