CSS 多重背景
在本章中，您將學習如何為一個元素新增多個背景影像。
您還將學習以下屬性
background-sizebackground-originbackground-clip
CSS 多重背景
CSS 允許您透過 background-image 屬性為一個元素新增多個背景影像。
不同的背景影像由逗號分隔，影像堆疊在一起，第一個影像最靠近檢視者。
下面的示例有兩個背景影像，第一個影像是花（對齊底部和右側），第二個影像是紙張背景（對齊左上角）
示例
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
自己動手試一試 »
可以使用單獨的背景屬性（如上）或 background 簡寫屬性來指定多個背景影像。
以下示例使用 background 簡寫屬性（與上面的示例結果相同）
示例
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
自己動手試一試 »
CSS 背景尺寸
CSS background-size 屬性允許您指定背景影像的尺寸。
尺寸可以以長度、百分比指定，或使用以下兩個關鍵字之一：contain 或 cover。
下面的示例將背景影像的大小調整為比原始影像小得多（使用畫素）
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
程式碼如下
示例
#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
自己動手試一試 »
background-size 的另外兩個可能值是 contain 和 cover。
contain 關鍵字將背景影像縮放到儘可能大（但其寬度和高度都必須適合內容區域）。因此，根據背景影像的比例和背景定位區域，背景可能存在一些未被背景影像覆蓋的區域。
cover 關鍵字將背景影像縮放到使內容區域完全被背景影像覆蓋（其寬度和高度都等於或超過內容區域）。因此，背景影像的某些部分可能在背景定位區域不可見。
下面的示例演示了 contain 和 cover 的用法
示例
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
自己動手試一試 »
定義多重背景影像的尺寸
background-size 屬性在處理多重背景時，也接受多個背景尺寸值（使用逗號分隔的列表）。
下面的示例指定了三個背景影像，每個影像都有不同的背景尺寸值
示例
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
自己動手試一試 »
全屏背景影像
現在我們希望網站的背景影像始終覆蓋整個瀏覽器視窗。
要求如下
- 用影像填滿整個頁面（沒有空白）
- 根據需要縮放影像
- 將影像居中
- 不要引起捲軸
下面的示例演示瞭如何實現；使用 <html> 元素（<html> 元素的高度至少等於瀏覽器視窗的高度）。然後設定一個固定且居中的背景。然後使用 background-size 屬性調整其大小
英雄影像
您也可以在 <div> 上使用不同的背景屬性來建立英雄影像（帶有文字的大影像），並將其放置在您想要的位置。
示例
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
自己動手試一試 »
CSS background-origin 屬性
CSS background-origin 屬性指定背景影像的位置。
該屬性接受三個不同的值
- border-box - 背景影像從邊框的左上角開始
- padding-box - （預設）背景影像從內邊距邊緣的左上角開始
- content-box - 背景影像從內容的左上角開始
下面的示例演示了 background-origin 屬性
示例
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
自己動手試一試 »
CSS background-clip 屬性
CSS background-clip 屬性指定背景的繪製區域。
該屬性接受三個不同的值
- border-box - （預設）背景繪製到邊框的外邊緣
- padding-box - 背景繪製到內邊距的外邊緣
- content-box - 背景繪製在內容框內
下面的示例演示了 background-clip 屬性
示例
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
自己動手試一試 »
CSS 高階背景屬性
| 屬性 | 描述 |
|---|---|
| background | 在一個宣告中設定所有背景屬性的簡寫屬性 |
| background-clip | 指定背景的繪製區域 |
| background-image | 為元素指定一個或多個背景影像 |
| background-origin | 指定背景影像的位置 |
| background-size | 指定背景影像的大小 |
