如何创建此图像效果？

我已经看了这个页面了一段时间了。真是太棒了。但我无法分辨滚动中发生的背景图像效果。通过代码发现，他们正在使用Jquery和一些滚动插件，但没有任何关于我可以看到的图像。如何创建此图像效果？

你会怎么说它完成了？

2010-03-10 Industrial

非常有趣的是，这是一个页面，需要一些时间来检测...但非常酷。 – Zoidberg 2010-03-10 18:36:44

为什么使用jQuery标签？对于很多事情来说，根本不需要JavaScript。 – Dykam 2010-03-10 18:43:09

这招很简单，只需要一些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技术。

来源

2010-03-10 18:36:10 Gumbo

你忘了使用JQuery在'.a'，'.b'和'.c' div上分配图像。 – 2010-03-10 18:41:41

@The Elite绅士：为什么我应该在有简单的CSS解决方案时使用jQuery？而DIV *有*背景图片。 – Gumbo 2010-03-10 18:44:21

但他们仍然用JS做点什么。如果我禁用JS，则根本不显示背景图像。 – 2010-03-10 18:45:02

它是4个div，每个背景图像都有不同的背景图片，特效的效果特别好的是“背景附加：固定;”属性来停止后台滚动。

如果您下载Firefox的Firebug，您可以检查div的并观察CSS如何使页面行为并尝试自行复制它。

真的很好看的效果我必须承认:-)

来源

2010-03-10 18:37:19

如何创建此图像效果？

回答

相关问题