完整的背景/边框充满了视差滚动(Full background/borders filled with parallax scrolling)

完整的背景/边框充满了视差滚动(Full background/borders filled with parallax scrolling)

我是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文件完成的方式，以便我可以理解这个概念。

我尝试过：我尝试使用背景大小：对于每个图像，但它只是使用我应用它的最后一个图像中的任何一个成为其他图像背面的整个背景。

I am absolutely new to HTML and CSS so i was hoping someone could point me in the right direction. I am trying to understand this tutorial to make parallax scrolling websites: http://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

but i notice it comes with normalize.css which makes each image expand to fit the browser perfectly. I am not sure which part of it makes it work to do that properly, i was hoping someone could point me to the section of code so that i can analyze it.

If i remvoe normalize.css from the package the website looks like this: http://postimg.org/image/w8cv2cv0x/

with it the website looks like this: http://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/

how do they do that?

Here is the normalize.css file: https://github.com/necolas/normalize.css/

I am assuming this can be achieved in different ways but i'm looking for the way that it is done with the normalize.css file so that i can understand the concept.

What i have attempted: I have tried to use background-size: for each image but it just makes whichever was the last image that i applied it to becomes the entire background in the back of the other images.

最满意答案

normalise.css只删除浏览器默认样式，而没有预设页边距。

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

body { margin: 0; }

那么div与图像作为背景使用

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

normalise.css only removes browser default styles without it the body has a preset margin.

so the code that is removing the black edge around it is

body { margin: 0; }

then the div's with images as backgrounds use

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