Question

我使用particle.js作为我的背景，但粒子只跨越窗口的大小，并在向下滚动时消失。为了解决这个问题，我在其css选择器中添加了position: fixed;。虽然，粒子完全跨越页面，但网页上的所有超链接都被取消激活。为什么会这样？任何解决方法？

编辑： Github repo for particles.js https://github.com/VincentGarreau/particles.js/

<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="site/js/app.js"></script>

CSS实施：

#particles-js{
width: 100%;
height: 100%;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}

对于JS文件，请参考上面的存储库。实际上app.js和particles.js实际上是插件中的主要工作。

Answer 1

我遇到了同样的问题并解决了以下问题：

CSS

#particles-js{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #000;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.body-particles{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

HTML

<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- SOME CSSs HERE -->

        <link rel="stylesheet" media="screen" href="assets/css/particles.css">

         <!-- SOME SCRIPTS HERE -->
    </head>
    <body>
        <div class="body-particles">

        <!-- Wrapper -->
            <div id="wrapper">
                <!-- MY STUFF HERE, STYLED WITH MY CSS -->
            </div>
        </div>

        <!-- particles.js container -->
        <div id="particles-js"></div>

        <!-- scripts -->
        <script src="assets/js/particles.js"></script>
        <script src="assets/js/app.js"></script>

    </body>
</html>

要获得工作的超链接（以及particles.js触摸事件），我将类mouseEvents添加到我需要聚焦的元素（例如超链接，导航栏等）

CSS

.body-particles{
  pointer-events: none;
}


.mouseEvents{
  pointer-events: all;
}

使用particles.js

1 个答案: