CSS多背景設置層次

在CSS中，可以使用多個背景來渲染一個元素，每個背景都可以設置顏色、圖像或漸變。同時，還可以通過設置背景大小、定位和縮放來控制不同背景之間的層次關系。

背景層次

當使用多個背景時，可以通過使用逗號來分隔不同的值，如下所示：

background: url(image1.png) no-repeat center center, 
url(image2.png) no-repeat center center;

第一個背景圖像會被渲染在最上層，而第二個背景圖像會被渲染在最下層。

背景大小

可以在每個背景中分別設置背景大小。如果只設置一個背景大小，則所有背景都使用相同的大小。如下所示：

background-size: cover, contain;

第一個背景將完全覆蓋要素，而第二個背景將被包括在要素內。

背景定位

可以在每個背景中分別設置背景定位。如果只設置一個背景定位，則所有背景都使用相同的定位。如下所示：

background-position: center top, left bottom;

第一個背景圖像將被居中放置在元素的頂端，而第二個背景圖像將被放置在元素的左下方。

背景縮放

可以在每個背景中分別設置背景縮放。如果只設置一個背景縮放，則所有背景都使用相同的縮放。如下所示：

background-size: cover, 50%;

第一個背景將以其原始大小縮放以完全覆蓋元素，而第二個背景將以50％的大小縮放。

總結

通過這些CSS屬性，可以輕松地設置多個背景圖像，并控制它們之間的順序、大小、位置和縮放比例，以創建美觀的背景效果。