这个代码的堆叠层顺序是如何使用z索引的

Question

我正在做这个项目，对这个代码堆叠顺序有一个问题。它具有z索引-1、背景颜色、线性梯度的背景图像和图像的背景图像。我无法理解其中的分层。

定位的顺序是什么？哪些离观众更近，哪些离观众更远？

代码如下：

body::before {
content:"";
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: var(--darkblue);
background-image: linear-gradient(
to right,
rgba(58,58,158,0.8),
rgba(136,136,206, 0.7)
),
url(images/image.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

Answer 1

由于您提到了z索引：-1，背景和背景图像都在"-1"层上。

为背景图像添加颜色的更好方法是使用具有"背景图像"属性的"线性梯度"，但使用具有背景图像的背景，如

background: var(--darkblue);
background-image: linear-gradient(
to right,
rgba(58,58,158,0.8),
rgba(136,136,206, 0.7)
),
url(images/image.jpg);

毫无用处。

如果你仍然想同时使用这两种方法，你可以把它们放在diff‘div’中。

Answer 2

对于HTML页面的分层顺序，它将始终具有以下规则。

• 元素将始终位于其父元素的前面。这并没有说明它内部的其他元素
• CSS引擎将始终在较低的z索引前面呈现较高的z索引。如果没有定义z索引，它将充当0
• 这些元素将首先呈现静态元素，然后是相对元素，再是绝对元素，然后才是固定元素
• 如果这些规则都不不同，则元素将按照编写的顺序呈现(第一个在后台，最后一个在前台(

对于分层背景图像，第一个将在前景上渲染，最后一个将在背景上渲染。背景颜色将始终呈现在背景图像之前。