javascript - 可以将 HTML 内容放在 Canvas (着陆页)之上

Question

我有一个 Canvas 设置，其中有许多在屏幕上移动的粒子。当用户单击时，会添加更多粒子。问题是，这个粒子系统是针对着陆页的。

我可以使用 Canvas ，但是如果我想向着陆页添加文本，我做不到。这可能吗？我想在屏幕中央显示“欢迎”，但是如果我将它添加到粒子所在的 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

你可以用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