javascript - 充满视差滚动的完整背景/边框

Question

我对 HTML 和 CSS 完全陌生，所以我希望有人能给我指出正确的方向。我试图理解本教程以制作视差滚动网站: http://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

但我注意到它带有 normalize.css，它使每个图像都能扩展以完美适应浏览器。我不确定它的哪一部分使它能够正确地做到这一点，我希望有人能指出我的代码部分，以便我可以对其进行分析。

如果我从包中删除 normalize.css，网站将如下所示: http://postimg.org/image/w8cv2cv0x/

网站看起来像这样: http://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/

他们是怎么做到的？

这是 normalize.css 文件: https://github.com/necolas/normalize.css/

我假设这可以通过不同的方式实现，但我正在寻找使用 normalize.css 文件完成的方式，以便我能够理解这个概念。

我的尝试: 我尝试对每张图片使用 background-size: 但它只会让我应用它的最后一张图片成为整个背景其他图片。

Answer 1

normalise.css 只移除浏览器默认样式，没有它 body 有预设边距。

所以去除它周围黑边的代码是

body {
     margin: 0;
     }

然后使用图片作为背景的div

background-repeat: no-repeat;
background-position: 50% 0px;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;