Question

如何制作动画背景（javascript / css）作为我网站的正文背景（或同等版本）？我可以将它放在div中并使其工作，但无法弄清楚将其设置为背景。注意：我使用bootstrap。

我假设我只是在我的javascript中选择了正文，但我可能做错了。类似于：canvas = document.body，然后移除＆＃39; myHolder＆＃39;因为持有人就是身体。

以下是我的 HTML div来显示内容。（我知道将它设置为背景是错误的，但它是我能够显示它的唯一方法）

<div id="myHolder">
<canvas id="myAnimation"></canvas>
</div>

以下是我的 javascript （与上面的canvas / div相关的部分）：

initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {x: width/2, y: height/2};

        largeHeader = document.getElementById('myHolder');
        largeHeader.style.height = height+'px';

        canvas = document.getElementById('myAnimation');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext('2d');
}

function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        largeHeader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }

更新：我的页面现在包含以下代码：动画显示为背景，但其他div仍在页面下方进一步推动。但是，背景在其他div后面正确显示。

    <style>
    #myAnimation {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    </style>
    <div id="myHolder">
    <canvas id="myAnimation" width="100%" height="100%"></canvas>
    </div>
....page content...

Answer 1

幸运的是，这只是一个CSS改变！

#myAnimation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -100; //Put your background behind the rest of your content
}

请注意，这会拉伸画布，因此如果您想避免这种情况，则需要将宽度和高度设置为100％。

<canvas id="myAnimation" width="100%" height="100%">

在Bootstrap网站

1 个答案: