如何在css后台设置z-index

Question

我有两个背景（从css调用），但第一个背景是全屏宽度，第二个是在它下面（隐藏）。所以我想设置z-index，如果可能的话。你知道如何解决这个问题吗？谢谢。

码

background-image:url("/images/background.png"), url("/images/fp_images/bg_image.png")

Answer 1

根据规范，逗号分隔列表中的第一个图像位于顶部。

列表中的第一个图像是最靠近用户的图层，下一个图像是在第一个图像后面绘制的，依此类推。背景颜色（如果存在）将绘制在所有其他图层下方。

Answer 2

你不能按照自己的意愿做你想做的事。 css规则（z-index和background-image）适用于项。你不能说x规则适用于y规则，这不是CSS的工作方式。

您唯一的解决方案是让两个项目具有不同的background-image，然后将z-index应用于这些项目。

HTML

<div id="one"></div>
<div id="two"></div>

CSS

/*on top*/
#one{
background-image:url("/images/background.png");
z-index:10;
}

/*underneath*/
#two{
url("/images/fp_images/bg_image.png");
z-index:5;
}

你必须让这些物品彼此叠加，可能使用浮子，但这取决于你的整体设计。