CSS3——背景的設計

1、background-size屬性

在CSS3中，可以使用background-size屬性來規定背景圖檔的尺寸，這可以在不同的環境中重複使用背景圖檔。

相關代碼示例：

div{
	background-size: 20px 10px;
}
           

在最基本的用法中是使用長度機關或者百分比來指定背景的尺寸，其中第一個值是寬度，第二個值高度。如果隻設定一個值，則高度預設是auto。

在background-size還有兩個可選項：cover和contain。這兩個選項都不會造成圖像比例失真。其中cover相當于寬度等于元素高度、高度設定auto的情況；而contain則相當于高度等于元素高度、寬度設為auto的情況。

在background-size: contain;中其等效于background-size: 100% auto;

在background-size: cover;中其等效于background-size: auto 100%;

注意：background-size一定要在指定圖檔後設定，否則不會生效。

2、background-origin屬性

background-origin屬性指定了圖檔的起始位置，在正常情況下背景圖檔是從内邊距的左上角開始延展的，而background-origin指定背景圖檔從哪個位置開始延展。

background-origin的相關屬性值為：

• border-box：邊框左上角
• padding-box：内邊距左上角
• content-box：内容左上角

3、background-clip屬性

background-clip屬性控制整個元素背景的顯示範圍。

background-clip相關的屬性值為：

• border-box：在邊框部分也顯示背景
• padding-box：在外邊框内顯示背景
• content-box：在内容區域顯示背景

4、background屬性

background簡寫屬性在一個聲明中設定所有的背景屬性。

可以設定如下屬性：

• background-color：規定要使用的背景顔色。
• background-position：規定背景圖像的位置。
• background-size：規定背景圖檔的尺寸。
• background-repeat：規定如何重複背景圖像。
• background-origin：規定背景圖檔的定位區域。
• background-clip：規定背景圖檔的繪制區域。
• background-attachment：規定背景圖像是否固定或者随着頁面的其餘部分滾動。
• background-image：規定要使用的背景圖像。
• inherit：規定應該從父元素繼承background屬性的設定。

如果不設定其中的某個值，也不會出現問題。

通常建議使用這個屬性，而不是分别使用單個屬性，因為這個屬性在較老的浏覽器中能夠得到更好的支援，而且鍵入的字母也更好。

在CSS3中允許設定多個背景圖檔，每個背景圖檔占一層，層的上下按照在CSS中書寫的順序來定，最先寫的背景在最上層，每層圖檔定義使用英文逗号分隔開。如果出現重疊，那麼寫在前面的圖檔會覆寫在最上層。

相關代碼示例如下所示：

div{
	background: url(../images/2.jpg) 200px 0 no-repeat,
	url(../images/1.jpg) 10px 0 no-repeat,
	url(../images/3.jpg) 200px 200px no-repeat;
}
           

從性能方面進行考慮，加載多張圖檔會增加HTTP請求，并且多張圖檔的總的大小所占用的記憶體空間較大，故從性能方面并不推薦使用該方法。