javascript - 在 PixiJS 粒子容器上叠加图像和文本？

Question

我是一名 Web 开发新手，正在创建我的第一个个人投资组合页面。我正在尝试将此粒子容器用作一种背景英雄“视频”。

Codepen.io - https://codepen.io/erikterwan/pen/VpjVvZ

HTML:

<div id="fps"></div>

CSS:

html, body {
    margin: 0;
    padding: 0;
}

#fps {
    position: absolute;
    bottom: 5px;
    right: 5px;

    font-family: sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    color: rgba(255,255,255,0.5);

    z-index: 2;
}

我现在将省略 JS，因为它很长，但如果您想看一看(并查看粒子容器的实际外观)，它就在 Codepen 中。

我一直在尝试在容器上叠加图像和文本(就像我的照片下面有我的名字)，但它们要么只是在上面或下面，要么完全消失(我假设在它后面)。

我的 HTML:

<div class="container-fluid">
    <div id="fps"></div>
    <div class="row">
        <div class="col-lg-3 col-lg-offset-4">
            <img id="profile-image" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
    </div>
</div>

我的 CSS:

html {
    font-family: 'Raleway', sans-serif;
}
/* Navbar Stuff Here */
#fps {
    color: #fff;
    color: rgba(255,255,255,0.5);
    z-index: 2;
}
#profile-image {
    border-radius: 100%;
    height: 150px;
    background-color: yellow;
}

我没有修改任何 JS。

如果有人能提供一些见解或指出正确的方向来解决这个问题，我将不胜感激!

Answer 1

您只需要绝对定位您的 <div> :

.container-fluid{
    z-index:1;
    position: absolute;

}