使用多重背景

你可以為元素套用多重背景。這些背景會層層相疊，你提供的第一個背景在最上層，而最後列出的背景在最底層。只有最後一個背景可以包含背景顏色。

多重背景以逗號分隔的列表指定，例如 background: background1, background2, ...;。這個語法被簡寫屬性 background 和其除了 background-color 以外的個別屬性所接受：background-attachment、background-clip、background-image、background-origin、background-position、background-repeat、background-size。

範例

在這個範例中，堆疊了三個背景：Firefox logo、一個泡泡的圖片，以及一個線性漸層：

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%), rgb(255 255 255 / 0%));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
}

如你所見，Firefox logo（在 background-image 中第一個列出）在最上層，直接在泡泡圖形之上，接著是漸層（最後列出）在所有先前的「圖片」之下。每個後續的子屬性（background-repeat 和 background-position）會套用到對應的背景上。所以 background-repeat 列出的第一個值會套用到第一個（最前面的）背景，以此類推。