javascript - 带有 css 和 javascript 的 HTML 背景

Question

我对它的背景一无所知http://startupgiraffe.com/的背景一无所知

我已经搜索了很多关于使用形状和 css 创建背景但没有用的东西。有人可以指导我创建一个像这样的背景吗http://startupgiraffe.com/这样的背景。

谢谢

Answer 1

As you can see in the source code op startupgiraffe; there are multiple "background" parts:

<section id="background-wrapper" class="full-wrapper">

  <section id="first-background">
    <div id="scroll-trigger"></div>
  </section>

  <section id="second-background">
  </section>

  <section id="third-background">
  </section>

  ----

</section>

They have used a lot of javascripting to dynamically switch between the background sections resulting in a concatenated background.

If you would like to replicate this behavior or learn more details about it, I suggest you start looking at the source code of the html, css and javascript. You could also use your browsers analysis tools (firebug, chrome's console) to find out more of the website's behavior.

Answer 2

第一步是启动 Chrome 的开发工具（或任何你喜欢的工具——Chrome 很好），进入网络，然后点击底部的图片：

这让你看到发生了什么。

简而言之，CSS 中的绝对定位 + 大量图像。