2

我制作了一个particle.js 背景，并在此基础上制作了一个容器。在这个容器中，我有两个包含一些数据的表，当我减小屏幕尺寸时，容器本身超出了particle.js 背景。我也附上了我的问题的图片，请看一下。

这是我的一个大学项目，我试图从过去两天解决它，但没有得到任何具体的解决方案。

 <div id="particles-js">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <table class="table">
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
              </tr>
              <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
              </tr>
              <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
              </tr>
            </tbody>
          </table>
        </div>

canvas {
  display: block;
  vertical-align: bottom;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100% !important;
  background: #00356B;
}

.container {
  margin-top: 20px;
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  color: #fff;
  max-width: 90%;
  padding: 2em 3em;
  background-color: #131415;
  text-shadow: 0px 0px 2px #131415;
  font-family: 'Open Sans', sans-serif;
}

我希望容器在particle.js 背景内，但它在背景之外。问题的图像，我的容器超出了背景

4

1 回答 1

7

不要将内容放在#particles-js.

将它们放在一个共同的父级中position:relative。
因为particles-js是绝对定位，如果你想让你的内容显示在粒子上方，你需要给它的容器：position: relative; z-index:1;并且还要确保内容本身没有任何背景（background可以放在公共容器上或#particles-js元素上）：

CSS：

.outer-container {
  position: relative;
}
#particles-js {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #212529; /* could go on .outer-container as well */
}
.outer-container .your-content {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

标记： 

<div class="outer-container">
  <div id="particles-js"></div>
  <div class="your-content">
    your contents here
  </div>
</div>

工作示例：

particlesJS("particles-js", {
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 840
      }
    },
    color: {
      value: "#ffffff"
    },
    shape: {
      type: "triangle",
      stroke: {
        width: 0,
        color: "#000000"
      },
      polygon: {
        nb_sides: 42
      },
    },
    opacity: {
      value: 0.42,
      random: false,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.1,
        sync: false
      }
    },
    size: {
      value: 3,
      random: true,
      anim: {
        enable: false,
        speed: 42,
        size_min: 0.1,
        sync: false
      }
    },
    line_linked: {
      enable: true,
      distance: 210,
      color: "#ffffff",
      opacity: 0.42,
      width: 1
    },
    move: {
      enable: true,
      speed: 4.2,
      direction: "none",
      random: true,
      straight: false,
      out_mode: "out",
      bounce: false,
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200
      }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: true,
        mode: "repulse"
      },
      onclick: {
        enable: true,
        mode: "push"
      },
      resize: true
    },
    modes: {
      grab: {
        distance: 420,
        line_linked: {
          opacity: 1
        }
      },
      bubble: {
        distance: 420,
        size: 42,
        duration: 2.1,
        opacity: 8.4,
        speed: 3
      },
      repulse: {
        distance: 84,
        duration: 0.84
      },
      push: {
        particles_nb: 4.2
      },
      remove: {
        particles_nb: 2.1
      }
    }
  },
  retina_detect: true
});
.outer-container {
  position: relative;
}

#particles-js {
  background-color: #212529;
  position: absolute;
  height: 100%;
  width: 100%;
}

.outer-container .table-dark {
  z-index: 1;
  position: relative;
  background-color: transparent;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://vincentgarreau.com/particles.js/assets/_build/js/lib/particles.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="outer-container">
        <div id="particles-js"></div>
        <table class="table table-dark">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First</th>
              <th scope="col">Last</th>
              <th scope="col">Handle</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

为什么？

因为一个元素position:absolute将使用最近定位的祖先（CPA）作为参考，其中“最近定位的祖先”是指第一个最近的父元素，其position值不是static（默认值）。
如果没有父级<body>被“定位”，<body>将被使用。

对于我们的示例，这意味着：#particles-js将.outer-container用作 CPA（width: 100%; height: 100%CPA 维度的平均百分比），并且 CPA 将根据其非绝对定位内容来调整大小，即<table>（因为所有position:absolute内容都从文档流中取出，因此它的父级表现得好像内容不存在）。

于 2019-04-20T12:34:05.100 回答