javascript - 将P5草图放置为剖面背景

我正在配置Bootstrap模板，并尝试将P5.js草图设置为网站部分的背景。

我尝试在该部分中创建一个div，然后将div的CSS设置为position: absolute !important;，但是，这仍然会替换其他所有内容，并且不会填充该部分区域。

将草图插入到剖面中以使其完全填充为背景而不干扰任何其他组件的最可靠的解决方案是什么？

<section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">
    <div id="container"></div>
    <div class="my-auto">
        <h1 class="mb-0">Charles
                <span class="text-primary">Fried</span>
              </h1>
        <div class="subheading mb-5">Give a description
            <a href="mailto:[email protected]">[email protected]</a>
        </div>
        <p class="mb-5">Blahhhhhhh</p>
        <ul class="list-inline list-social-icons mb-0">
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
        </ul>
    </div>
</section>

P5草图：

function setup() {

    var clientHeight = document.getElementById('about').clientHeight;
    var clientWidth = document.getElementById('about').clientWidth;

    var cnv = createCanvas(clientHeight, clientWidth);
    cnv.parent("container");
    background(0);
}

编辑：我把JSfiddle放在一起，希望有人可以帮助我解决这个问题。为了清楚起见，画布应填充黄色区域（部分），而不移位其中的任何项目。

最佳答案

好吧，在玩了之后，看来解决方案很简单。


可以使用画布的<section>将其直接插入id元素：

function setup() {

	var clientHeight = document.getElementById('about').clientHeight;
	var clientWidth = document.getElementById('about').clientWidth;

	var cnv = createCanvas(clientWidth, clientHeight);
	cnv.parent("about");
	background(0);
}

然后可以使用CSS使用canvas关键字对画布进行样式设置：

canvas {
  position: relative;
  z-index: -3 !important;
}