9

我已经看了这个页面一段时间了。太神奇了，真的。但我不知道滚动时发生的背景图像效果是如何工作的。浏览了代码发现他们使用的是 Jquery 和一些滚动插件，但我看不到图像。

你怎么说它已经完成了？

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

4

2 回答 2

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属性，但它的支持仍然是专有的，使用供应商特定的前缀，如-khtml-(Konqueror)、-moz-（基于 Gecko 的浏览器，如 Firefox）、-o-（Opera）和-webkit-（基于 WebKit 的浏览器，如 Safari）。

如果你可以弃权，你可以使用我向你展示的 CSS 技术。

于 2010-03-10T18:36:10.287 回答
2

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

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

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

于 2010-03-10T18:37:19.320 回答