藉由 CSS3 我們可以對元素使用 多重背景。每個設定的背景被一個個分層,第一個背景在最上面,最後一個背景是在最下面一層。 記得只有最後一個背景可以設定 background color。
簡易的表達方式:
.myclass {
background:
background 1, //第一層
background 2,
...,
background N; //最後一層
}
可以使用縮寫的方式 background
和個別標記的方式設定多重背景,但是部分屬性無法設置多重背景,例如 background-color
。下面是能設置為多重背景的背景屬性:
範例
下面的範例中,重疊三個背景:Firefox logo、線性漸層、一張泡泡的圖片
.multi_bg_example {
background-image : url(https://mdn.mozillademos.org/files/11305/firefox.png),
url(https://mdn.mozillademos.org/files/11307/bubbles.png),
linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat : no-repeat,
no-repeat,
no-repeat;
background-position: bottom right,
left,
right;
}
結果
如你所見,Firefox logo(列表第一個選項)在最上面,接著是漸層。每個隨後的子屬性(background-repeat
和 background-position
)應用相對的背景上。所以第一個 background-repeat
的值應用在第一個(最前面)背景。