将 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

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

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);
}

然后可以使用 CSS 和 canvas 关键字来设置 canvas 的样式：

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

将 P5 草图作为截面背景

Place P5 Sketch as Section Background

html

javascript

css

twitter-bootstrap

p5.js