如何在bootstrap中将particle.js添加为div背景

时间:2018-07-06 10:34:28

标签: javascript twitter-bootstrap particles typed

我想在引导程序的div部分中添加一个粒子,其中包含一些文本和typed.js文本,而我的文本不会消失,这有可能吗?

<div class="container text-center">
  <div id="particle-js">
    <h1 class="heading">
       TEXT
    </h1>
    <p>
      <span class="typing"></span>
    </p>
  </div>
</div>

1 个答案:

答案 0 :(得分:2)

您可以简单地更改html布局,以便让particle-js div可以定位为固定或绝对,然后再给另一个div放置文本。

<div class="container text-center">
  <div id="particles-js"></div>
  <div id="overlay">
    <h1 class="heading">
      TEXT
    </h1>
    <p>
      <span class="typing"></span>
    </p>
  </div>
</div>


#particles-js {
  background-color: #b61924;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

#overlay {
  position: relative;
  padding: 50px;
}

这是一种非常简单的方法:https://jsfiddle.net/yrm4916s/