该图像效果如何产生的？

StackOverflow https://stackoverflow.com/questions/2419523

  •  19-09-2019
  •  | 
  •  

题

我现在看了这个页面有一段时间了。惊人的，真的。但我不能告诉如何上滚动的作品发生的背景图像效果。通过代码去了发现他们正在使用jQuery再加上一些滚动的插件，但是一无所知，我可以看到图像。

你怎么会说，它的工作？

该网站： http://herohousing.org/UBBT/

有帮助吗？

解决方案

这招是相当简单的，只是需要一些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财产但其支持仍然是专有使用供应商特定的前缀等-khtml-（Konqueror中），-moz-（壁虎基于浏览器如Firefox），-o-（歌剧）和-webkit-（基于WebKit浏览器如Safari）。

如果你可以从弃权，您可以使用CSS技术，我教你。

其他提示

这是4个格为每个不同的背景图像，让效果工作特别好是在“背景附着：固定的;”属性以停止背景滚动。

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

非常好看的效果，我必须承认： - ）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top