文章/答案/技术大牛

发布

问使用particles.js
EN

Stack Overflow用户

提问于 2017-08-03 14:11:58

回答 1查看 791关注 0票数 0

我使用particles.js作为我的背景，但是粒子只会延伸到窗口的大小，向下滚动就会消失。为了解决这个问题，我将position: fixed;添加到它的css选择器中。尽管粒子完全跨越页面，网页上的所有超链接都被停用了。为什么会发生这种事？有什么解决办法吗？

编辑: particles.js https://github.com/VincentGarreau/particles.js/的 Github回购

<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来完成插件的主要工作。

html

css

particles.js

回答 1

Stack Overflow用户

发布于 2017-08-04 02:23:03

我也遇到了同样的问题，解决了如下问题：

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;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45486736

复制

相似问题

问使用particles.js
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用particles.jsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用particles.js
EN