### **一、background-size背景圖像的尺寸** background-size1個或2個值，它的類型可以是像素（px）、百分比（%）或是auto，還可以是cover和contain。 <br/> <br/> #### **屬性** **length**：用**像素（px）**設置背景圖像的高度和寬度；第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值默認為"auto"。 <br/> <br/> **percentage**（百分比）：以父元素的百分比來設置背景圖像的寬度和高度；第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值默認為"auto"。 <br/> <br/> **cover**：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。寬高等比例縮放，背景圖像的某些部分可能會超出背景區域，無法顯示在背景區域中 <br/> <br/> **contain**：把背景圖像擴展至最大尺寸，寬高等比例縮放，使寬度和高度完全適應背景區域，圖像會完全顯示在背景區域，如寬度或高度其中一條邊已完全覆蓋對應的區域，另一條邊沒有覆蓋，則不會在縮放，會留有空白。 <br/> <br/> **背景圖片全屏**顯示css3代碼： 用background-size可以實現這個效果，用fixed（background-attachment 屬性）和center（background-position 屬性）定位背景圖，然后用background-size來使圖片鋪滿，具體css如下： ~~~ .test { background: url(bg.jpg) no-repeat center center fixed; -webkit-background–size: cover; -moz-background–size: cover; -o-background–size: cover; background–size: cover; } ~~~ 適用于以下瀏覽器 Safari 3+ Chrome IE 9+ Opera 10+ (Opera 9.5 支持background-size屬性 但是不支持cover) Firefox 3.6+ 這里ie8及以下版本不支持，這些蛋疼瀏覽器則需要添加下面的css來設置兼容 ~~~ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’.bg.jpg’, sizingMethod=’scale’); -ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’bg.jpg’, sizingMethod=’scale’)”; ~~~ 這個用濾鏡來兼容的寫法并不是很完美，首先是圖片路徑，這里只能是相對于根目錄的路徑，或者用絕對路徑；然后是圖片縱橫比改變了，是拉伸鋪滿的形式。盡管如此，總比留空白好多了吧 <br/> <br/> <br/> ### **二、background-origin** 相對于內容框來定位背景圖像 background-origin: padding-box|border-box|content-box; padding-box：從內邊距（padding）區域開始顯示背景；（默認值） border-box：從邊框區（border）域開始顯示背景； content-box： 從內容區域（即去除邊框和內邊距）區域開始背景。 `注意：background-origin主要是用來控制背景圖片的background-position位置，并且其只能控制背景圖片。` <br/> <br/> <br/> ### **三、Background-clip** 主要是用來確定背景的裁剪區域，換句話說，就是如何控制元素背景顯示區域 **語法：** background-clip: border-box|padding-box|content-box; border-box：背景在border邊框開始顯示，從border向外裁剪，也就是超出邊框部分將被裁剪掉。（默認值） padding-box：景在padding開始顯示，從padding區域向外裁剪，超過padding區域的背景將被裁剪掉； content-box：背景在內容content區域開始顯示，從content區域向外裁剪，超過context區域的背景將被裁剪掉；