html - SVG 作为 div 背景

Question

我想做的是拥有一个类似于此处实现的动画 SVG 背景，以供学习:https://conference.laravel.com/

看来我不能用这个 css svg 背景，所以我需要创建与 html 内联的元素。这就是我走了多远:

完整代码

http://jsfiddle.net/C8d34/13/

我希望 svg 阶段占据整个蓝色区域，这样我就可以将 svg 元素放入其中并应用动画，如第一个链接中所示。但是，我的标题菜单内容强制 svg 位于蓝色区域之外。

如何让它位于内容后面而不被内容推倒？创建另一个 div 是唯一的方法吗？

我的 SVG 代码

<svg viewBox="0 0 100 100"> /* this here */
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

但是，由于框中还有其他内容，并且我希望我的 svg 占据 100% 的蓝色区域，因此它会强制 SVG 关闭。

问题

我想在蓝色区域有一个带有多个动画元素的动画 svg 背景。然而，标题将整个 svg 区域向下推离蓝色区域。如何使其看起来像背景并将我的内容放在顶部？

Answer 1

我将 z-index 属性赋予 nav 元素，以便可以单击该链接。并对 SVG 元素使用 position:absolute 。检查DEMO 。

svg {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}
div.buttons{position:absolute; bottom:0;} /*div contains the buttons like Free Trial*/
nav{position:relative;z-index:1;}