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

Answer 2

试试这个...

html, body{
padding:0px;
margin:0px;
}

然后，为了使您的图像适用于超大显示器（即：多屏幕等），请将其缩放<img>并设置较低的 z-index。

.background{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
z-index:0;
}


<img src="background.jpg" class="background">

更改background.jpg为您的背景图像并将<img>标签放在页面底部，以便最后加载。如果 z-index 没有显示在正确的级别，您可能不得不使用它（即：覆盖其他元素）