HTML/CSS - 滚动时修复背景

Question

有没有想法或解释他们如何做这个网站的背景？ http://upcircuit.org/ 基本上,固定背景就是这里的诀窍.但有多个背景,我试图解决这个网站的技巧:))我尝试扫描页面源,但我不知道他们是如何做到这一点.

Answer 1

它们的面板大小与窗口一样大.然后他们正在做的是为每个面板设置背景图像并设置它background-attachment: fixed以使其相对于窗口保持定位,而不是它所处的div.

我在这里为你设置了基础知识:http://jsfiddle.net/Zc822/

body, html {
    width: 100%;  // Sets the html and body width and height 
    height: 100%; // to the width and height of the window.
    margin: 0;
}
.panel{
    width: 100%;  // Sets each panel to the width and height
    height: 100%; // of the body (which is set to the window)

    background-repeat: no-repeat;
    background-attachment: fixed;  //Sets background fixed in window
    background-size: cover;
}

然后你只需要background-image为每个单独的面板指定一个.

很确定这就是你要找的东西.