整個背景/邊框充滿視差滾動

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 {
     margin: 0;
     }

然后使用圖片作為背景的div

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