Question

我不知道为什么引导容器会阻止文本后面的particles-js动画。我希望背景开始的文字以及周围的文字也可以动画。。：：

代码：

.gradient-bg {
  background: rgba(120, 87, 158, 1);
  background: -webkit-linear-gradient(left, rgba(55, 49, 42, 1) 0%, rgba(47, 41, 35, 1) 0%, rgba(120, 87, 158, 1) 100%);
}

/* ---- particles.js container ---- */

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.bg-primary {
  background-color: #ff00ff !important;
}

body {
  padding-top: 70px;
}

h1 {
  color: aliceblue
}

<!-- particles.js container -->

<body>
    <div id="particles-js" class="gradient-bg">
        <div class="container">
            <h1>This thing blocks the background.</h1>
            <h1>This thing blocks the background.</h1>
            <h1>Particles below are animated.</h1>
        </div>
    </div>


    <!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
    </script>
    <script src="../scripts/particles.js">
    </script>
</body>

Answer 1

<body>
    <div id="particles-js">

    </div>

    <div class="container">
        <h1>This thing blocks the background.</h1>
        <h1>This thing blocks the background.</h1>
        <h1>Particles below are animated.</h1>
    </div>


    <!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
    </script>
    <script src="../scripts/particles.js">
    </script>
</body>

已解决。

Bootstrap容器块JS动画背景

1 个答案: