【问题标题】:why margin not working with particles.js background为什么保证金不适用于particles.js背景
【发布时间】:2019-02-04 17:32:14
【问题描述】:

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

我最近了解了particle.js,但对它一无所知。

我已经尝试了此链接上提供的解决方案,但它不适合我。

particles.js not covering entire page

任何帮助将不胜感激。

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

【问题讨论】:

    标签: html css particles.js


    【解决方案1】:

    首先,您的 CSS 中有一个错字:它是 width 而不是 widows

    这可能是你的&lt;body&gt; 标签的错,因为它只是扩展以适应你的小内容,而不是整个窗口。所以即使#particles-jswidth:100%height:100%,它也只会扩展以适应&lt;body&gt; 的大小,而不是屏幕。

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

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

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

    【讨论】:

    • 不,它不工作。没有按钮它工作正常,但是当我使用边距对齐按钮时,粒子没有填满整个页面。
    猜你喜欢
    • 2017-04-04
    • 1970-01-01
    • 2022-07-28
    • 1970-01-01
    • 1970-01-01
    • 2018-01-03
    • 1970-01-01
    • 1970-01-01
    • 2018-07-10
    相关资源
    最近更新 更多