我已经看了一段时间了。太棒了,真的。但我不知道滚动上发生的背景图像效果是如何起作用的。已经通过代码发现他们正在使用Jquery加上一些滚动插件,但没有关于我能看到的图像。
你怎么说它已经完成了?
答案 0 :(得分:11)
这个技巧很简单,只需要一些CSS,每个面板都有一个固定的背景图像:
<style type="text/css">
div {
height: 100%;
background-image: url(http://sstatic.net/so/img/logo.png);
background-attachment: fixed;
border: thin solid;
}
div.a {
background-repeat: repeat-x;
background-color: #FDD;
}
div.b {
background-repeat: repeat-y;
background-color: #DFD;
}
div.c {
background-repeat: no-repeat;
background-color: #DDF;
}
</style>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
这里我使用相同的背景图像,但不同的背景颜色和图像重复应该会显示它是三个不同的元素。
编辑好的,似乎有些人怀疑我在写什么。事实上,引用的网站使用jQuery。但只是为了使图像适合浏览器视口的宽度和高度,因为您还无法调整背景图像的大小。 CSS 3指定background-size
property,但其支持仍然是专有的,使用供应商特定的前缀,如-khtml-
(Konqueror),-moz-
(基于Gecko的浏览器,如Firefox),-o-
(Opera )和-webkit-
(基于WebKit的浏览器,如Safari)。
如果你可以弃用它,你可以使用我向你展示的CSS技术。
答案 1 :(得分:2)
这是4个div,每个都有不同的背景图像,使效果特别好的是“背景附加:固定;”用于停止背景滚动的属性。
如果您下载Firebug for Firefox,您可以检查div并观察CSS如何使页面运行并尝试自己复制它。
非常漂亮的效果我必须承认: - )