我的容器Div超出了Particle.js背景

时间：2019-04-19 14:23:17

标签： javascript html5 css3 particles.js

我已经创建了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背景中，但该容器不在背景中。Image Of The Problem, I am having Container Going Outside Of The Background

1 个答案:

答案 0 :(得分：1)

请勿将内容放在#particles-js内。

将它们两个都与position:relative放在同一个父级中。
由于particles-js的位置是绝对的，因此如果您希望内容显示在粒子上方，则需要为其提供容器：position: relative; z-index:1;，并确保内容本身没有任何背景（{{ 1}}可以放在通用容器或background元素上）：

CSS： 

#particles-js

标记： 

.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>的元素将使用最接近的祖先（CPA）作为参考，其中“最接近的祖先” 表示具有position:absolute值的第一个最接近的父代除了position（默认值）以外。
如果没有将static之前的父对象“定位” ，则将使用<body>。

对于我们的示例，这意味着：<body>将使用#particles-js作为CPA（.outer-container是CPA尺寸的平均百分比），并且CPA的大小将取决于其非绝对定位的内容，即width: 100%; height: 100%（因为所有<table>的内容都从文档流中删除，因此其父级的行为就像该内容不存在）。

相关问题
最新问题