CSS 的 background 屬性

正如我之前所說，文檔樹中的每個元素都是一個方盒。每個盒都有背景層，它可以是完全透明的、有顏色的或一張圖片。背景層由 8 個 CSS 屬性（和 1 個簡寫屬性）控制。

background-color

background-color 屬性設置元素背景顏色。它的值可以是一個合法的顏色值或 transparent 關鍵字。

.left{ background-color: #ffdb3a; }
.middle{ background-color: #67b3dd; }
.right{ background-color: transparent; }

背景顏色繪制在由 background-clip 屬性指定的盒模型區域內。如果同時設置了背景圖片，顏色層會在它們后面。不像圖片層可以設置多個，每個元素只擁有一個顏色層。

background-image

background-image 屬性為元素定義一個（或多個）背景圖片。它的值通常是用   url()  符號定義的圖片  url。 none 也是允許的，它會被當做空的一層。

.left{ background-image: url('ire.png'); }
.right{ background-image: none; }

我們也可以指定多個背景圖片，用逗號隔開。沿著 z 軸從前向后依次繪制每個圖片。

.middle{
    background-image: url('khaled.png'), url('ire.png');
    /* Other styles */
    background-repeat: no-repeat;
    background-size: 100px;
}

background-repeat

在 background-size 指定大小和 background-position 指定位置后， background-repeat 屬性控制如何平鋪背景圖片。

屬性值可以是以下關鍵字之一： repeat-x 、 repeat-y 、 repeat 、 space 、 round 、 no-repeat 。除了前兩個（ repeat-x  和  repeat-y ）之外，其他關鍵字可以寫一次來同時定義 x 軸和 y 軸，或分開定義兩個維度。

.top-outer-left{ background-repeat: repeat-x; }
.top-inner-left{ background-repeat: repeat-y; }
.top-inner-right{ background-repeat: repeat; }
.top-outer-right{ background-repeat: space; }
 
.bottom-outer-left{ background-repeat: round; }
.bottom-inner-left{ background-repeat: no-repeat; }
.bottom-inner-right{ background-repeat: space repeat; }
.bottom-outer-right{ background-repeat: round space; }

background-size

background-size 屬性定義背景圖片的大小。它的值可以是一個關鍵字、一個長度或一個百分比。

屬性可用的關鍵字是 contain 和 cover 。 contain 會按圖片比例將其放大至寬和高完全適應區域，與之相反， cover 會將圖像調整至能夠完全覆蓋該區域的最小尺寸。

.left{
    background-size: contain;
    background-image: url('ire.png');
    background-repeat: no-repeat;
}
.right{
    background-size: cover;
    /* Other styles same as .left */
}

對于長度值和百分比，我們可以用來定義背景圖片的寬高。百分比值根據元素的尺寸來計算。

.left{ background-size: 50px; /* Other styles same as .left */ }
.right{ background-size: 50% 80%; /* Other styles same as .left */ }

background-attachment

background-attachment 屬性控制背景圖片在可視區和元素中如何滾動。它有三個可能的值。

fixed 意思是背景圖片相對于可視區固定，即使用戶滾動可視區時也不移動。 local 意思是背景在元素中位置固定。如果元素有滾動機制，背景圖片會相對于頂端定位，當用戶滾動元素時，背景圖片會離開視野。最后， scroll 意思是背景圖片固定，不會隨著元素內容滾動。

.left {
    background-attachment: fixed;
    background-size: 50%;
    background-image: url('ire.png');
    background-repeat: no-repeat;
    overflow: scroll;
}
.middle {
    background-attachment: local;
    /* Other styles same as .left */
}
.right {
    background-attachment: scroll;
    /* Other styles same as .left */
}

background-position

這個屬性，結合 background-origin 屬性，定義了背景圖片起始位置。它的值可以是一個關鍵字、一個長度或一個百分比，我們可以依次定義 x 軸和 y 軸的位置。

可用的關鍵字有 top 、 right 、 bottom 、 left 和 center 。我們可以任意組合使用，如果只指定了一個關鍵字，另一個默認是 center 。

.top-left {
    background-position: top;
    background-size: 50%;
    background-image: url('ire.png');
    background-repeat: no-repeat;
}
.top-middle {
    background-position: right;
    /* Other styles same as .top-left */
}
.top-right {
    background-position: bottom;
    /* Other styles same as .top-left */
}
.bottom-left {
    background-position: left;
    /* Other styles same as .top-left */
}
.bottom-right {
    background-position: center;
    /* Other styles same as .top-left */
}

對于長度值和百分比值，我們也可以依次定義 x 軸和 y 軸的位置。百分比值與容器元素相關。

.left{ background-position: 20px 70px; /* Others same as .top-left */ }
.right{ background-position: 50%; /* Others same as .top-left */ }

background-origin

background-origin 屬性定義背景圖片根據盒模型的哪個區域來定位。

可用的值有 border-box ，圖片相對于邊框（Border）定位， padding-box ，圖片相對于內邊距框（Padding）定位， content-box ，圖片相對于內容框（Content）定位。

.left {
    background-origin: border-box;
    background-size: 50%;
    background-image: url('ire.png');
    background-repeat: no-repeat;
    background-position: top left;
    border: 10px dottedblack;
    padding: 20px;
}
.middle {
    background-origin: padding-box;
    /* Other styles same as .left*/
}
.right {
    background-origin: content-box;
    /* Other styles same as .left*/
}

background-clip

background-clip 屬性決定背景繪制區域，也就是背景可以被繪制的區域。像 background-origin 屬性一樣，它也基于盒模型。

.left{
    background-clip: border-box;
    background-size: 50%;
    background-color: #ffdb3a;
    background-repeat: no-repeat;
    background-position: top left;
    border: 10px dotted black;
    padding: 20px;
}
.middle{
    background-clip: padding-box;
    /* Other styles same as .left*/
}
.right{
    background-clip: content-box;
    /* Other styles same as .left*/
}

background

最后， background 屬性是其他背景相關屬性的簡寫。子屬性的順序并沒有影響，因為每個屬性值的數據類型不同。然而，對于 background-origin  和  background-clip 屬性，如果只指定了一個盒模型區域，會應用到兩個屬性。如果指定了兩個，第一個設置為 background-origin 屬性。

 

來自：http://web.jobbole.com/90616/