Возможно разместить содержимое HTML поверх холста (целевая страница)

Question

У меня есть настройка холста с несколькими частицами, которые перемещаются по экрану. Когда пользователь нажимает больше частиц, добавляется. Проблема в том, что эта система частиц предназначена для целевой страницы.

У меня есть работа с холстом, однако если я хочу добавить текст на целевую страницу, я не могу. Это возможно? Я хотел бы иметь «Добро пожаловать» в центре экрана, однако, если я добавлю его в код HTML, где находятся частицы, это не видно.

--- Мой HTML ---

<div id="particles-js"></div> 
<div class="count-particles"> 
    <span class="js-count-particles">--</span> particles 
</div> 

--- CSS----

/* ---- reset ---- */ 

body { 
    margin: 0; 
    font:normal 75% Arial, Helvetica, sans-serif; 
} 

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

/* ---- particles.js container ---- */ 

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

/* ---- stats.js ---- */ 

.count-particles{ 
    background: #000022; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 80px; 
    color: #13E8E9; 
    font-size: .8em; 
    text-align: left; 
    text-indent: 4px; 
    line-height: 14px; 
    padding-bottom: 2px; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
} 

.js-count-particles{ 
    font-size: 1.1em; 
} 

#stats, 
.count-particles{ 
    -webkit-user-select: none; 
    margin-top: 5px; 
    margin-left: 5px; 
} 

#stats{ 
    border-radius: 3px 3px 0 0; 
    overflow: hidden; 
} 

.count-particles{ 
    border-radius: 0 0 3px 3px; 
} 

У меня есть настройки Codepen.io, любая помощь очень ценится!

-Codepen.io - http://codepen.io/HoneyBadgerYT/pen/jqKZxo

Answer 1

Если добавить еще один элемент (например, h2 или дела), то вам нужно будет дать ему position:absolute и z-index, который выше, чем z-index из вашего #particle-js

смотри ниже HTML:

(. Обратите внимание, что я добавил z-index свойство вашего #particle-js элемента, и я также добавил h2 стиль ниже, что)

<div id="particles-js"></div> 
 
<h2>WELCOME</h2> 
 

 

 
<div class="count-particles"> 
 
    <span class="js-count-particles">--</span> particles 
 
</div>

и CSS

/* ---- reset ---- */ 
 

 
body { 
 
    margin: 0; 
 
    font:normal 75% Arial, Helvetica, sans-serif; 
 
} 
 

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

 
/* ---- particles.js container ---- */ 
 

 
#particles-js { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    background-image: url(""); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: 50% 50%; 
 
    z-index:1; 
 
} 
 

 
h2 { 
 
    position:absolute; 
 
    z-index:2; 
 
    width:100%; 
 
    text-align:center; 
 
    color:#ffffff; 
 
    top:0; 
 
    left:0; 
 
} 
 

 
/* ---- stats.js ---- */ 
 

 
.count-particles{ 
 
    background: #000022; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0; 
 
    width: 80px; 
 
    color: #13E8E9; 
 
    font-size: .8em; 
 
    text-align: left; 
 
    text-indent: 4px; 
 
    line-height: 14px; 
 
    padding-bottom: 2px; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-weight: bold; 
 
} 
 

 
.js-count-particles{ 
 
    font-size: 1.1em; 
 
} 
 

 
#stats, 
 
.count-particles{ 
 
    -webkit-user-select: none; 
 
    margin-top: 5px; 
 
    margin-left: 5px; 
 
} 
 

 
#stats{ 
 
    border-radius: 3px 3px 0 0; 
 
    overflow: hidden; 
 
} 
 

 
.count-particles{ 
 
    border-radius: 0 0 3px 3px; 
 
}

Answer 2

вы можете сделать это с помощью CSS

h1 { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: white; 
} 

HTML:

<div id="particles-js"></div> 

<h1>Welcome</h1> 
<div class="count-particles"> 
    <span class="js-count-particles">--</span> particles 
</div> 

рассматривают работу demo