首页 文章

Particles.js仅作为特定部分的背景

提问于
浏览 次
2

我正在使用Vincent Garreau的Particles.js（会链接但不能共享多个链接）来实现我网站特定部分的粒子效果背景 .

<div id="particles-js" >

<section class="page-section features" >
<div class="container relative" >
     <div class=" font-alt hs-line-2 mb-30">
     <!-- Other relevant code for this section -->
     </div>
     </div> <!--end container div-->
     </section>
</div> <!-- End particles div>

CSS

#particles-js {
  background-color: #000;
  position: absolute;
  z-index: 50;
  width: 100%;
  height: 100%;
  top: 0;
}

.page-section {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 90px 0;
}

类'features'没有样式规则 .

但是，这是该代码的输出：http://imgur.com/a/Ce9Sh（图像1）

粒子div位于特征部分下方 . 没有设置为背景 .

设置位置：粒子div的绝对或固定会完全破坏要素部分的布局，因为要素部分出现在许多其他元素之后 .

设置固定在粒子div上的位置，其上边缘和左上边距使得功能永久固定在屏幕上，我无法向下滚过它 .

绝对拧紧功能部分和颗粒的定位.js仍然不可见 .

这就是我设置位置时的样子：粒子div上的绝对标记：http://imgur.com/a/Ce9Sh（img2）

我想要的只是在特征部分后面出现的粒子，而不是单独在它下面 .

任何援助都是贬值的 .

javascript jquery html css particles.js

1 回答

  • 0

    我遇到过同样的问题！我所做的基本上是将particle.js设置为固定背景：

    view.html

    <div id="particles-js" class="animation_background"></div>
<section>
...
...
</section>

    styles.css.scss

    .animation_background {
  background-color: #08090d;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0; 
}

    然后我必须为所有其他高于0的元素设置z-index，以便它在背景之上 . 由于性能原因，这个解决方案并不完美，但它会给你带来希望的效果！

    回复于

相关问题