background

background新增的屬性background-size，background-clip,background-origin

background-size：基本語法

 background-size: auto || <length> || <percentage> || cover || contain

取值說明：

一、auto:此值爲默認值，保持背景圖片的原始高度和寬度；

二、<length>此值設置具體的值，能夠改變背景圖片的大小；

三、<percentage>此值爲百分值，能夠是0％〜100％之間任何值，但此值只能應用在塊元素上，所設置百分值將使用背景圖片大小根據所在元素的寬度的百分比來計算。

四、cover：此值是將圖片放大，以適合鋪滿整個容器，這個主要運用在，當圖片小於容器時，又沒法使用background-repeat來實現時，咱們就能夠採用cover;將背景圖片放大到適合容器的大小，但這種方法會使用背景圖片失真；

五、contain:此值恰好與cover相反，其主要是將背景圖片縮小，以適合鋪滿整個容器，這個主要運用在，當背景圖片大於元素容器時，而又須要將背景圖片所有顯示出來，此時咱們就能夠使用contain將圖片縮小到適合容器大小爲止，這種方法一樣會使用圖片失真。

當background-size取值爲<length>和<percentage>時能夠設置兩個值，也能夠設置一個值，當只取一個值時，第二個值至關於auto，但這裏的auto並不會使背景圖片的高度保持本身原始高度，而會與第一個值相同。

 

background-clip：基本語法

 background-clip ： border-box || padding-box || content-box

取值說明：

一、border-box:此值爲默認值，背景從border區域向外裁剪，也就是超出部分將被裁剪掉；

二、padding-box：背景從padding區域向外裁剪，超過padding區域的背景將被裁剪掉；

三、content-box：背景從content區域向外裁剪，超過content區域的背景將被裁剪掉

 

background-origin的基本語法

 background-origin: padding-box || border-box || content-box

取值說明：

一、padding-box(padding):此值爲background-origin的默認值，決定background-position起始位置從padding的外邊緣（border的內邊緣）開始顯示背景圖片；

二、border-box(border):此值決定background-position起始位置從border的外邊緣開始顯示背景圖片；

三、content-box(content):此值決定background-position起始位置從content的外邊緣（padding的內邊緣）開始顯示背景圖片；