我正在從事這個專案，并且對此代碼堆疊順序有疑問。它有一個z-index -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;
}
uj5u.com熱心網友回復：
既然你提到了z-index：-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 'divs' 中。
uj5u.com熱心網友回復：
對于 HTML 頁面的分層順序，它將始終具有以下規則。
- 一個元素總是在它的父元素之前。這并沒有說明其中的其他元素。
- CSS 引擎將始終在較低 z-index 的前面呈現較高的 z-index。如果 z-index 沒有定義，它將作為 0。
- 這些元素將首先渲染靜態元素，然后是相對的，然后是絕對的，然后是固定的。
- 如果這些規則都不同，則元素將按寫入的順序呈現（第一個在背景上，最新的在前景上）。
對于分層背景影像，第一個將在前景上渲染，最后一個在背景上。背景顏色將始終在背景影像之前呈現。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416919.html
標籤：