Question

我是一名初学者网络开发者，创建了我的第一个个人投资组合页面。我试图将这个粒子容器用作一种背景英雄＆＃34;视频。＆＃34;

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;

}

叠加图像＆amp; PixiJS粒子容器上的文字？

1 个答案: