Particles.js в качестве фона?

Я пытаюсь использовать этот пример в качестве фона, но я не могу заставить его работать.

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

Чтобы обойти это, я вынужден использовать верхнюю границу поля -1500px только для того, чтобы поместить мой текст поверх него, и это вызывает серьезные проблемы с отзывчивостью.

Кто-нибудь знает, как я могу использовать его в качестве фона?

Создатель плагина сделал это здесь, на своем веб-сайте.

http://vincentgarreau.com/en

Вы можете сказать, что, когда вы проверяете его, на вершине нет "холста", как на примере CodePen.

Ответ 1

Мне просто удалось сделать это с помощью следующего кода 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
}

Затем я написал <div id="particles-js"></div> сразу после открывающего тега тела. Обратите внимание, что вы не можете видеть класс canvas, потому что он генерируется библиотеку частиц .js.

Фрагмент кода создания холста

Ответ 2

Я столкнулся с этой проблемой и исправил ее, выполнив следующие действия:

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

Ответ 3

Попробуйте использовать свойство overflow: hidden; в элементе, который вы хотите поставить перед particle.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

Попробуйте следующее:

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

где ваше тело имеет id = "particle_background"

Ответ 5

Вы также можете реализовать его таким образом

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

в css

.something {
 z-index:1;
}

весь элемент частицы-js, помещенный на задний план. надеюсь, полезен.

Ответ 6

В id="particles-js" просто добавьте этот код в свой css:

position: fixed !important;
display: block;

Вы можете добавить !important, чтобы переопределить предыдущие стили.

Ответ 7

Если вы используете частицу js для веб-сайта WordPress и переходите по этой ссылке: http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/

Затем вы можете заметить, что движущаяся частица находится над вашим контентом, в этом случае просто присвойте контенту (это может быть столбец/строка, или кнопка, или поле ввода) "z-index: 5 (или более)"

На этой картинке панель поиска не работает. Итак, я дал ему "z-index: 5". Теперь работает нормально. Также частицы хорошо реагируют.

Ответ 8

Я искал то же самое. Теперь я буду первым, кто скажет, что, вероятно, что-то не так сделал, следуя приведенной здесь инструкции, но я нашел это, и оно отлично работает для меня.

Посмотри на эту ручку от 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>