javascript - 使背景图像可缩放到窗口

Question

让我想想，我该如何解释我的问题。我有一个包含许多 div 层的滚动页面......一个在另一个下面!它们的背景图片分辨率为 1920x1080 像素!但它们应该填满整个背景浏览器窗口。例如，当我缩放浏览器窗口时，图片应该自行缩放。

我见过一些做得很好的 jquery 插件，但对我来说背景图像在 css 中定义很重要，因为我使用 inview.js 并尝试创建视差效果。这可能吗？

谢谢泰德

Answer 1

你可以使用 background-size: cover 来实现这一点，尽管它是一个 CSS3 属性，有些浏览器不支持它。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

编辑 CSS Tricks 提供的前缀和后备解决方案

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