画布作为背景答案

【问题标题】：Canvas as background画布作为背景
【发布时间】：2022-06-14 00:10:58
【问题描述】：

不知道如何将此动画画布设置为我的投资组合页面的网站背景。任何帮助，将不胜感激。或者如何将带有文本的 div 放在画布上？所以它坐得很好，很平........

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio</title>
  <link rel="icon" type="image/x-icon" href="image/favicon.ico">
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" crossorigin="anonymous"></script>

  <nav>
    <!-- De checkbox -->
    <input type="checkbox" id="check">
    <label for="check" id="checkbox"> 
                <i class="fas fa-bars"  id="btn"></i>
                <i class="fas fa-times" id="cancel"></i>
            </label>

    <!-- logo en de Buttons in de nav bar -->
    <img src="image/logo.png" alt="logo">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="aboutme.html">About me</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</head>

<body>

  <div id="particles-js">

    <script>
      particlesJS.load('particles-js', 'particles.json', function() {
        console.log('particles.json loaded ...');
      });
    </script>

    <section class="home" id="home">
      <div class="max-width">
        <div class="home-content">
          <div class="text-1">Hey, I'm makkerheineken.</div>
          <div class="text-2">Front-End & Back-end Develeper.</div>
        </div>
      </div>
    </section>


  </div>

</body>

</html>

【问题讨论】：

标签： html5-canvas

【解决方案1】：

你可以给画布和屏幕一样大小，添加一个大小相同但绝对定位的 div，然后将其余元素放在这个 div 中。

【讨论】：