javascript - 将 P5 草图作为截面背景

Question

我正在配置 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:name@email.com">name@email.com</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一起希望有人能帮我解决这个问题。为清楚起见， Canvas 应填充黄色区域(部分)而不移动其中的任何元素。

Answer 1

好吧，在尝试之后，解决方案似乎非常简单。

1. Canvas 可以直接插入<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);
}

1. 然后可以使用 CSS 和 canvas 为 Canvas 设置样式关键词:

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