他们是如何理解或解释这个网站的背景? http://upcircuit.org/ 基本上,固定背景就是这里的诀窍。 但有多个背景,我试图解决这个网站的技巧:)) 我尝试扫描页面源,但我不知道他们是如何做到的。
答案 0 :(得分:6)
它们具有窗口大小的面板。然后他们正在做的是为每个面板设置背景图像并设置其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
。
很确定这就是你要找的东西。
答案 1 :(得分:1)
你有什么尝试?你有没有尝试过使用
background-attachment: fixed;
希望这有帮助。
答案 2 :(得分:1)
这是一种视差效果,通过让您的前景和背景以不同的速度移动来模拟3D空间。看起来图像可能被换出并固定在某些滚动点上。你需要使用一些小的javascript,但这不是一个难以实现的技巧:
这是一个帮助的图书馆:
http://matthew.wagerfield.com/parallax/?utm_medium=App.net&utm_source=PourOver
这是另一个整洁的网站,通过视差和滚动来做一些整洁的事情:https://www.google.com/nexus/5/
答案 3 :(得分:0)