Write By Monkeyfly

以下內容均為原創，如需轉載請註明出處。

前提

今天在審查元素時，發現這樣一串程式碼：

input.btn-upload {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
    background: none repeat scroll 0 0 transparent;
    /*無背景圖片，水平和垂直方向重複，隨頁面其他內容滾動而移動，水平和垂直方向尺寸為0，背景顏色透明*/
}

由於對css的background

屬性掌握不到位，只能記住常用的部分屬性，就導致第一時間內對上面的程式碼沒有看懂。

所以，熟練的掌握background 屬性全家桶是很有必要的。

介紹

我們都知道css的background屬性是一個複合屬性，可以簡寫成一行程式碼，也可以將每個屬性分開來寫。

• background 簡寫屬性在一個宣告中設定所有的背景屬性。如：

body{ 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}

注：如果不設定其中的某個屬性值，也不會出問題。

• 也可以設定如下屬性：

background-color
background-position
 

background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

通常建議使用簡寫屬性，而不是分別使用單個屬性。

這樣做的好處就是：

• 手寫的程式碼量少，比較每個屬性單獨寫要鍵入很多字母的。簡寫肯定書寫方便。
• 也是為了相容老版本的瀏覽器，這個簡寫的屬性在較老的瀏覽器中能夠得到更好的支援。

此外，最好還是將每一個屬性都熟練掌握了，否則，簡寫的屬性一多，可能自己都看不懂哪個值代表哪個屬性了。

畢竟，background 的簡寫屬性不是按照規定的順序來書寫的

，可以根據自己的喜好自定義屬性的書寫順序。

background 屬性全家桶 如下圖所示：

由上可知，background 全家桶共9大屬性。

不常用到的屬性：

• background-origin（基本很少用）
• background-clip（基本很少用）
• background-attachment（有時候還會用到）

下面就讓我們一一來認識一下，全家桶中的每一位成員。

1.background-color

作用

設定元素的背景顏色

取值如下：

background-color:yellow;//英文單詞代表的顏色名稱
background-color:#fff;//16進位制用法，#f00 => #ff0000（兩個字母為一組，相同就可以省略）
background-color:rgb(255,0,255);//用rgb程式碼表示
background-color:transparent;//預設值，表示背景顏色為透明。

可能的值

對於transparent，我有話要說

• 在大多數情況下，沒有必要使用 transparent。
• 它的適用情況：
  
  • 不希望某元素擁有背景色；
  • 不希望使用者對瀏覽器的顏色設定影響到你的頁面設計。

JavaScript語法

object.style.backgroundColor="#00FF00"

2.background-position

作用

設定背景影象的起始位置。

可能的值

由上可知，取值有3種：（1）表示方向的關鍵詞；（2）百分比；（3）position值（畫素或其他css單位）。

每一種取值都是用兩個獨立的值來表示背景圖片的位置的，即第一個值代表水平方向的位置，第二個值代表垂直方向的位置。

第1種取值說明

（1）對於用方向關鍵詞表示位置的寫法，可以這樣記憶：水平位置（上，中，下）、垂直位置（左，中，右）。
（2）水平方向的值可以和垂直方向的值進行兩兩組合，即總共有3² = 9種組合。

//這樣記憶起來也比較方便
                            //垂直方向
/*水平方向：*/   top     (left,center,right)
/*水平方向：*/   center  (left,center,right)
/*水平方向：*/   bottom  (left,center,right)

（3）預設值：0% 0%。
（4）如果只寫了水平方向的關鍵詞，那麼垂直方向的關鍵詞預設為center。

第2種取值說明

（1）依然是由兩個值構成，即(水平方向的值 垂直方向的值)。
（2）0% 0%的取值代表左上角的位置，100% 100%的取值代表右下角的位置。
（3）如果只寫了水平方向的取值，那麼垂直方向的取值預設為50%。

第3種取值說明

（1）仍然是是由兩個值構成，即(水平方向的值 垂直方向的值)。
（2）0 0的取值代表左上角的位置。
（3）一般都是使用畫素（pixel）作為值的單位，即px。當然，其他的css單位也都可以使用。
（4）如果只寫了水平方向的取值，那麼垂直方向的取值預設為50%。

注意：

百分比的值（%）可以和position值混用。如：background-position: -144px 70%;

JavaScript語法：

object.style.backgroundPosition="center"

3.background-size

作用

規定背景影象的尺寸（大小）。

語法

background-size: length|percentage|cover|contain;

可能的值

由上可知，取值總共分為兩大類：關鍵字取值（cover、contain）和非關鍵字取值（length、percentage）。

非關鍵字取值

非關鍵字取值就是我們平時用到的單位取值，即長度單位和百分比單位。

• 這兩種取值都是用兩個值來規定背景圖片的尺寸，即第一個值代表寬度，第二個值代表高度。
• 而且，如果只設置其中的一個值，另外一個值會自動取值auto。
• 其中，百分比取值是按照父元素的百分比來設定的。

關鍵字取值

關鍵字取值就是兩個固定的關鍵字，即cover和contain。

顧名思義，cover的中文意思是“覆蓋”；而contain的中文意思是“包容，容納”。

作用區別

• 如果圖片寬高不夠，cover會將圖片拉伸至足夠大，直至鋪滿整個背景區域。即使圖片的其他部分無法顯示在背景區域。（這樣就相當於變相的放大圖片至充滿容器，才不管圖片是否顯示完整）

• 而contain的做法是：自適應，即將圖片擴充套件至最大尺寸，讓圖片的寬和高都剛好適應整個背景區域，不會存在顯示部分圖片的問題。（即使拉伸後，圖片很不美觀，也會完全鋪滿整個背景區域）

單詞解釋

• cover v.遮蓋，覆蓋； 英 [ˈkʌvə(r)]
• contain vt.包含，容納; 英 [kənˈteɪn]

JavaScript 語法

object.style.backgroundSize="60px 80px"

4.background-repeat

作用

設定是否重複背景圖片 以及 如何重複背景影象。說白了，其實就是設定背景圖片是否平鋪。

注：預設情況下，背景圖片在水平和垂直方向上是會重複出現的（如果圖片的尺寸不足以鋪滿背景區域）。

語法

background-repeat: repeat(預設值) | no-repeat | repeat-x | repeat-y | inherit

可能的值

提示

（1）背景影象的位置是根據background-position屬性設定的。
（2）如果未規定 background-position 屬性，影象會被放置在元素的左上角。

JavaScript 語法

object.style.backgroundRepeat="repeat-y"

5.background-origin

作用

規定 background-position 屬性相對於什麼位置來定位。即，相對於什麼來定位背景圖片。

語法

background-origin: padding-box(預設值) | border-box | content-box;

分析

origin 英 [ˈɒrɪdʒɪn] n.起源，根源; [數]原點，起點;

• 顧名思義，origin就是設定背景圖片最初顯示時候的位置。
• 即最開始顯示時，背景圖片是根據盒子的哪個部分來進行定位的。（是邊框border呢，還是內邊距padding呢，亦或是內容content呢）

注：如果背景影象的 background-attachment 屬性為 "fixed"，則該屬性沒有效果。

可能的值

JavaScript 語法

object.style.backgroundOrigin="content-box"

動態效果圖

6.background-clip

作用

指定從哪個區域向外裁剪背景。（是邊框border開始裁減呢，還是從內邊距padding開始呢，亦或是從內容content開始呢）

單詞解釋

clip 英 [klɪp] vt. 剪; 剪掉;

語法

background-clip: border-box(預設值) | padding-box | content-box;

可能的值

JavaScript 語法

object.style.backgroundClip="content-box"

動態效果圖

7.background-attachment

作用

是否固定背景圖片的位置。（位置固定或隨頁面滾動）

• 如果固定的話，影象不會隨頁面的其餘部分滾動。
• 如果不固定的話，則讓背景圖隨著頁面的其餘部分滾動而進行移動。

分析

attachment 英 [əˈtætʃmənt] n.（用電子郵件傳送的）附件，附屬物; 依戀，依附;

attach[v.附上;依戀] + ment物 → n.附件, 附加裝置, 配屬

顧名思義，其實attachment要表達的意思就是：背景圖片是否要作為頁面的附加物，隨頁面一起滾動。

語法

background-attachment: scroll(預設值) | fixed | inherit;

可能的值

JavaScript 語法

object.style.backgroundAttachment="fixed"

8.background-image

作用

為元素設定背景影象。即在元素的背景中設定一個圖片。

提示

• 元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。
• 預設地，背景圖片位於元素的左上角，並在水平和垂直方向上重複。
• 請設定一種可用的背景顏色，這樣的話，假如背景圖片不可用，頁面也可獲得良好的視覺效果。

語法

background-image: none(預設值) | url('路徑') | inherit;

可能的值

JavaScript 語法

object.style.backgroundImage="url(stars.gif)"