我已经看了这个页面一段时间了.惊人的,真的但是我不知道在滚动作品上发生的背景图像效果如何.已经经历了代码,发现他们正在使用
Jquery加上一些滚动插件,但没有关于我可以看到的图像.
你怎么说这样做呢?
解决方法
这个技巧很简单,只需要一些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的浏览器,如苹果浏览器).
如果你可以弃权,可以使用我向你展示的CSS技术.