SOLUTION

Question

我想要做的是拥有类似于此处所取得的动画SVG背景，用于学习：https://conference.laravel.com/

似乎我不能用这个css svg背景，所以我需要用html内联创建元素。这是我得到了多远：

完整代码

我希望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元素，以便链接可以点击。并使用position:absolute作为SVG元素。查看 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;}

Answer 2

SOLUTION

这是造成问题的CSS规则：

.full_height { height: 100%; }

SVG作为div背景

2 个答案:

SOLUTION