[toc] ## background-image ### 生效前提 雖然說的是生效前提，但其實是生效了只是不可見 background的url并**不像**img的src一樣，引入圖片后，宿主元素大小會自動變為圖片大小。 background的url引入圖片后元素大小并不會發生改變。 這意味著，你要想在一個元素中看見背景圖片，這個圖片的高度不能為0  ### 默認表現 1. 平鋪，且是橫豎都平鋪  2. 頁面滾動時，宿主元素隨之滾動，其內的圖片背景當然得也會和宿主元素**一起**滾動 ## background-position  ### 基準 position都是按照元素的左上原點進行計算的 #### background-origin 默認基準是宿主元素的`padding-box` 還支持:`border-box`、`content-box`  #### background-clip So，background-clip剛好解決上面沒有被裁剪的問題 它也有三個值：`padding-box`、`content-box`、`border-box`  ##### text Chrome下還有個text值，就是按照文本進行背景圖裁剪 配合Chrome的`text-fill-color:transparent`能制作背景圖片填充文本的效果(`color:transparent`也行) ``` -webkit-background-clip:text; color:transparent; /* -webkit-text-fill-color:transparent; */ ```  ### 值 background-position值支持1~4個值，2個值是標準用法，多的兩個值一般是在使用關鍵字值時對關鍵字值進行**修飾** 這1~4個值可以是具體數值，也可以是百分比值，還可以是left、top、right、center和bottom等關鍵字 >ie8ie8以下值支持2個值 ``` background-position:left bottom; //支持關鍵字 background-position:bottom left; //可交換 background-position:0% 100%; //支持百分比 background-position:left 元素的高度px //支持px;可混用 ``` 以上情況就是2個值的使用方式，他們的效果是等價的 除此之外，我們也可以**只**使用一個值 ``` background-position:left; ``` 此時等價于 ``` background-position:left center; ``` So，必須有2個值，省略的話就認為是center(50%) 除此之外也有用到3~4個值的情況，此時一般是對使用的關鍵字值進行修飾 ``` background-position:left 100px top 100px; ```  #### 關于百分比值 ``` background-position:left 100% top; ``` 并不會讓背景圖片超出容器  這是因為背景圖的位置是按照如下公式計算的 ``` positionX = (容器的寬度-圖片的寬度) * percentX; positionY = (容器的高度-圖片的高度) * percentY; ``` >[danger] 即使值是一個負值，也是按照上面的公式計算  (設置`center，center`會發現和我們預想的不一樣，這是因為center也是按照百分比值進行計算的，也就是按照剩余空間進行計算) ## background-attachment 默認情況下， 頁面滾動時，宿主元素隨之滾動，其內的圖片背景當然得也會和宿主元素**一起**滾動。 但如果將值置為`fixed`，那么背景圖片的表現就會像position:fixed一樣（不會隨著頁面滾動而滾動）， 此時背景圖片就相當于給視口設置，背景圖片會在視口上橫豎平鋪，**且**只會平鋪一個視口大小（不論原宿主元素的大小是多大或多小） 但背景圖的可見范圍只有宿主元素那么大（就像扣了一個洞）  So，一般我們只會給html或則body元素這樣設置 ## background-repeat 默認為橫豎平鋪 支持的值有：`repeat`、`repeat-x`、`repeat-y`、`no-repeat` ## background-color 不存在background-image時，就會顯示background-color的設置  ## background-size ### 默認值auto 也就是圖片原本的寬高 ### 數值和百分比值 數值和百分比值默認需要兩個值，但也可以只設置一個值，那么另外一個值就會為auto，也就是按照圖片原本的寬高比等比例計算求出這個值。  除此之外百分比值是**相對**于**宿主元素**而不是圖片本身  ### cover 將背景圖片**放大**（或縮小），以鋪滿整個容器。這種方法很大可能會導致圖片失真。 手動測試以后，貌似發現不是失真（或則說失真的意思其實是模糊？），而是截取？  #### cover和center background-size:cover常用來配合background-position:center來制作滿屏背景效果 ### contain 保持圖片本身比例，將背景圖**縮放**（或放大）到寬度或高度正好適應所定義背景容器的區域。  ## background-break 僅firefox，詳見手冊 ## 多背景 多個背景之間用`,`分隔，并且一個宿主元素background-color只能存在一個 ``` backround:[background-image]|[background-position][/background-size]|[background-repeat]|[background-attachment]|[backgorund-clip]|[background-origin],* ```