Particles.js as a background?

问题

I'm trying to use this example as a background but I can't seem to get it to work.

http://vincentgarreau.com/particles.js/#nasa

In order to get around this I'm forced to use a margin top of -1500px just to place my text over the top of it and it's causing major issues with responsiveness.

Does anyone have any idea on how I can use it strictly as a background?

The creator of the plugin has done it here on his website.

http://vincentgarreau.com/en

You can tell because when you inspect it, there is no "canvas" hovering over the top as there is on the CodePen example.

回答1:

I just managed to do this with the next css code, just as the creator does in his nasa page:

body,
html {
    height: 100%
}

#particles-js canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

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

Then I wrote <div id="particles-js"></div> just after the body opening tag. Note that you can't see the canvas class because it's being generated by the particles.js library.

Canvas creation code fragment

回答2:

I've ran into this problem before and fixed it by doing this:

/* to show the canvas bounds and remove scrollbars caused by it, if applicable */
canvas {
    display:block;
    background: rgb(33,36,50);
    position: fixed;
    z-index: -1;
}

then create a div/main element for your content and add this to it:

mainElementNameHere {
    position: absolute;
}

回答3:

Try to use the overflow: hidden; property at the element that you want to put in front of the particles.js;

#main-section {
    overflow: hidden;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    opacity: 0.48;
}

回答4:

Try this:

#particle_background canvas{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}

where your body has id="particle_background"

回答5:

You also can implement it like this

<body id="particles-js">
 <div class="something">
  <h1> something here </h1>
 </div>
</body>

in css

.something {
 z-index:1;
}

all the element of particle-js placed at the background. hope useful.

回答6:

In id="particles-js" just add this code to your css:

position: fixed !important;
display: block;

You can add !important to override the previous styles.

回答7:

I've been looking for the same. Now I'll be the first to say I probably didn't do something right following the instruction up here, but I found this and it works perfectly for me.

See this pen by Michael Van Den Berg

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

canvas {
    display: block;
    vertical-align: bottom;
}

<body>

  <div id="particles-js"></div>
  <div> @*Content you want to be in front goes here*@ </div>

<body>

回答8:

If your using particle js for wordpress website and following this link : http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/

Then, you may notice that the moving particle are above your content, in that case just give the content (it could be a column/row, or Button, or input field) a “z-index: 5(or more)”

In this picture, the search bar wasn't working. So, I gave "z-index: 5" to it. Now it works fine. Also, the particles are responding well.

来源：https://stackoverflow.com/questions/40720838/particles-js-as-a-background

标签

javascript

html

css

particles