4.1 基本原則
CSS 允許在一個元素中使用多個背景圖，讓我們能創造出豐富多樣的視覺效果。透過 background-image 和相關屬性，可以設定多層背景圖，控制它們的順序、位置及其他特性。
語法
要設定多個背景圖，我們可以使用逗號來分隔不同的圖像：
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
設定每層的屬性
除了 background-image，還可以使用以下屬性來設定每層背景圖，這些屬性同樣支持用逗號分隔的多個值：
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
圖層順序
圖像按照指定的順序排列，第一個圖像是最靠近使用者的，而最後一個則最接近元素的背景。
4.2 圖片疊加
簡單的圖片疊加。
使用範例：
CSS
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
HTML
<body>
<div class="multi-bg">多層背景</div>
</body>
代碼解釋：
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: 設定兩個背景圖片background-position: center, top left;: 第一個圖片置中，第二個圖片放在左上角background-repeat: no-repeat, no-repeat;: 關閉兩個圖片的重複
4.3 使用多個圖片
使用不同大小的多個背景圖片。
使用範例：
CSS
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 50% 50%, 30% 30%;
border: 1px solid #000;
}
HTML
<body>
<div class="multi-bg-sizes">有尺寸的多層背景</div>
</body>
代碼解釋：
background-size: 50% 50%, 30% 30%;: 將第一個圖片縮放到元素的 50% 寬高，第二個圖片縮放到元素的 30% 寬高
4.4 透明圖片
帶透明度的圖片疊加。
使用範例：
CSS
.multi-bg-opacity {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, 50%;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
HTML
<body>
<div class="multi-bg-opacity">透明的多層背景</div>
</body>
代碼解釋：
background-size: cover, 50%;: 第一個圖片覆蓋整個元素，第二個圖片縮放到元素大小的 50%::before: 使用偽元素在背景圖片上加上一層半透明黑色圖層
4.5 背景裁剪
使用多個背景圖的其他屬性。
background-origin 和 background-clip
這些屬性控制背景圖的顯示區域和裁剪區域。
使用範例：
CSS
.multi-bg-origin-clip {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-origin: padding-box, content-box;
background-clip: border-box, padding-box;
border: 10px solid #000;
padding: 20px;
}
HTML
<body>
<div class="multi-bg-origin-clip">具有 background-origin 和 background-clip 的多層背景</div>
</body>
代碼解釋：
background-origin: padding-box, content-box;: 第一個圖片從 padding 邊緣開始顯示，第二個圖片從內容邊緣開始顯示background-clip: border-box, padding-box;: 第一個圖片被裁剪到邊框外緣，第二個圖片裁剪到 padding 內緣
GO TO FULL VERSION