html - 为什么保证金不适用于particles.js背景

问题描述

我使用particles.js 作为我的页面的背景。我创建了一个按钮，并且在按钮类中使用margin 属性时，我的粒子停止在整个页面中流动。

我最近了解了particle.js，但对此一无所知。

我已经尝试了此链接上提供的解决方案，但它对我不起作用。

任何帮助，将不胜感激。

 <style>
        body
        {
            padding: 0;
            margin: 0;
 background: linear-gradient(to top right, #112128,#274a5a, #203A43, #0F2027,#081014);   

        }
        #particles-js
        {
            widows: 100%;
            height: 100%;
        }
        .butt
        {
            margin-top: 300px;
            margin-left: 300px;
        }
</style>


<body>
    <section id="particles-js">
        <button class="butt">click here</button>

    </section>
</body>

标签： htmlcssparticles.js

首先，您的 CSS 中有一个错字：它width不是widows.

可能是您的<body>标签应该受到责备，因为它只会扩展以适应您的小内容，而不是整个窗口。因此，即使#particles-jshaswidth:100%和height:100%，它也只会扩展以适应您的大小<body>而不是屏幕的大小。

尝试https://stackoverflow.com/a/5722111/310779将正文扩展到屏幕大小。

如果这不起作用，那么我会尝试这样的事情：

#particles-js
{
   position: fixed;
   z-index: -1;
   left: 0;
   top: 0;
   width:100%;
   height: 100%;
}

html - 为什么保证金不适用于particles.js背景

问题描述

解决方案

推荐阅读