粒子效果作为网页背景？

Question

粒子效果作为网页背景？

javascripthtmlcssparticles

15

我想使用这个例子作为背景，但是我似乎无法让它正常工作。

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

为了解决这个问题，我被迫使用一个-1500像素的margin top，只是为了将我的文本放在它的上方，这会导致响应性方面的主要问题。

请问有没有人知道如何严格将其用作背景？

插件的创建者已经在他的网站上做到了这一点。

http://vincentgarreau.com/en

你可以看出来，因为当你检查它时，在CodePen的示例上没有“canvas”覆盖在顶部。

- Milan Maru

它在一个div中，具有z-index:-10;。 - Kevin Kloet

你能分享一下 CodePen 的链接吗？ - roberrrt-s

很遗憾，它不允许我分享Codepen的链接。 - Milan Maru

8个回答

10

我之前也遇到过这个问题，解决方法是这样的：

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

然后为您的内容创建一个div/main元素，并将以下内容添加到其中：

mainElementNameHere {
    position: absolute;
}

- Grey

1

谢谢，经过很长时间的努力，终于成功了。 - Rahul Sarma

5

尝试在你想要放置在 particles.js 前面的元素上使用 overflow: hidden; 属性。

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

- Renan Sigolo

4

我一直在寻找同样的内容。现在我要说的是，可能我没有按照这里的说明做正确的事情，但我发现了这个，它对我完美地起作用。

请查看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>

- Medismal

4

试试这个：

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

您的身体在HTML中具有id="particle_background"

- kumail

3

如果你正在为 WordPress 网站使用粒子 js，并且遵循此链接:

http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/

那么，你可能会注意到移动的粒子在内容之上，这种情况下只需给内容（可以是列/行、按钮或输入字段）一个"z-index: 5(或更多)"

在这张图片中，搜索栏无法正常工作。所以我给它加了

"z-index: 5"

现在它工作得很好。另外，粒子也响应良好。

- Raihanul Alam Hridoy

1

你也可以像这样实现它。

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

在CSS中。

.something {
 z-index:1;
}

粒子效果的所有元素都放置在背景中。

希望有用。

- gema

1

在id="particles-js"中，只需将以下代码添加到您的CSS中：

position: fixed !important;
display: block;

您可以添加!important来覆盖先前的样式。

- Darwin P

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erwol · Accepted Answer

我刚刚用下面这段CSS代码成功地做到了这一点，就像他的NASA页面创建者一样：

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
}

接着我在body开始标签后面写了<div id="particles-js"></div>。请注意，您看不到canvas类，因为它是由particles.js库生成的。

创建Canvas代码片段