CSS Z Index For Unity WebGL Build

Question

所以我试图在我的Unity WebGL构建中有一个自定义图像和加载栏，我已经改变了文件夹中的图像，但是我的图标图像占据了大部分背景，但出现在进度条的前面。

我试过这样做，但它不会改变堆叠顺序

#unity-logo { width: 1000px; height: 1000px; z-index: -1;background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; z-index: -2; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }

试图让Logo在进度条后面

Answer 1

徽标图像位于进度条图像的后面，您可以尝试将进度条元素的z-index属性设置为高于徽标元素的值。

试试这个:

#unity-logo {
width: 1000px;
height: 1000px;
background: url('unity-logo-dark.png') no-repeat center;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#unity-progress-bar-empty {
width: 141px;
height: 18px;
margin-top: 10px;
margin-left: 6.5px;
background: url('progress-bar-empty-dark.png') no-repeat center;
position: relative;
z-index: 1;
}

徽标图像被赋予了一个绝对位置，这允许它被放置在进度条后面。徽标图像的z-index设置为-1，这将使其位于页面上所有其他元素的后面。进度条图像被赋予一个相对位置，这使它处于页面的正常流程中。进度条图像的z-index被设置为1，这使它位于徽标图像的前面。

根据需要调整logo和进度条元素的位置。