使用多重背景
您可以為元素應用多重背景。這些背景是分層疊加的，您提供的第一個背景在最上面，最後一個背景在最底層。只有最後一個背景可以包含背景顏色。
多重背景以逗號分隔的列表形式指定，例如 background: background1, background2, ...;。這種語法被 background 簡寫屬性及其除 background-color 之外的各個屬性接受：background-attachment、background-clip、background-image、background-origin、background-position、background-repeat、background-size。
示例
在此示例中，堆疊了三個背景：Firefox 標誌、氣泡影像和線性漸變
HTML
html
<div class="multi-bg-example"></div>
CSS
css
.multi-bg-example {
width: 100%;
height: 400px;
background-image:
url("firefox.png"), url("bubbles.png"),
linear-gradient(to right, rgb(30 75 115 / 100%), transparent);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:
bottom right,
left,
right;
}
結果
如您所見，Firefox 標誌（在 background-image 中首先列出）在最上面，直接位於氣泡圖形上方，然後是漸變（最後列出），位於所有先前“影像”的下方。每個後續的子屬性（background-repeat 和 background-position）都應用於相應的背景。因此，background-repeat 的第一個列出的值應用於第一個（最前面的）背景，依此類推。