首頁 > 開發者 > JavaScript
css3 background，css3
background是一個很重要的css屬性，在css3中新增了很多內容。一方面是原有屬性新增了屬性值，另一方面就是新增了3個屬性。
一、css3中新增屬性值介紹css2的background有5個屬性，縮寫如下：
background:background-color,background-image,background-repeat ,background-attachment, background-position;
其中background-image,background-repeat和background-position在css3中都增加了新的屬性值。
1、background-imagecss3中background-image可以設定多個背景圖片，用法：background-image:url(),url()。
對於多重背景圖需要注意以下幾點：
a、背景圖順序背景圖以層的形式顯示，多個背景圖從上往下分布，第一個背景圖在最頂層，所以添加多個背景圖需要注意順序以及圖片透明度。
舉例：
兩個div的背景圖一樣，順序相反。
<style>div{ width: 200px; height: 200px; border: 5px dotted pink; background-repeat: no-repeat; display: inline-block;}.bg{ background-image: url(img/bg_flower.gif),url(img/bg_flower_2.gif);}.bg2{ background-image: url(img/bg_flower_2.gif),url(img/bg_flower.gif);}</style></head><body><p>兩張背景圖：尺寸一樣，第一張透明，第二張不透明<p><img src="img/bg_flower.gif"/><img src="img/bg_flower_2.gif" /><div class="bg"></div><div class="bg2"></div></body>View Code
分析：因為背景圖以層的形式顯示，第一個添加的在最上層。所以上左圖中第一個背景圖在上且透明就可以產生很漂亮的重疊效果，第二個因為不透明的背景圖在上就覆蓋了第二個圖片，所以看不到下面的圖片。
這點和box-shadow很相似。一個box有多重陰影時，多個陰影從上往下分布，第一個陰影在最頂層。瞭解更多可參考《css3 box-shadow》
b、文法縮寫用'，'隔開每組background的縮寫值；如果有 size 值，需要緊跟 position 並且用 "/" 隔開；
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
Note:縮寫時必須把background-color設定在最底層，才會生效。如果將background-color添加到其他層，語法錯誤整個規則都被忽略，不會顯示。
舉例：
<style>div{ width: 200px; height: 200px; border: 5px dotted pink; display: inline-block;}.bg3{ background: url(img/bg_flower.gif) no-repeat,url(img/bg_flower_2.gif) no-repeat blue;}.bg4{ background: url(img/bg_flower.gif) no-repeat yellow,url(img/bg_flower_2.gif) no-repeat blue;}</style></head><body><p>兩張背景圖：尺寸一樣，第一張透明，第二張不透明<p><img src="img/bg_flower.gif"/><img src="img/bg_flower_2.gif" /><div class="bg3"></div><div class="bg42"></div></body>View Code分析：左一，background-color寫在最底層，生效。左二中，給第一層加了一個background-color:yellow;整個規則無效。
c、拆分寫法或者將縮寫拆分開寫：如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應用該屬性值；同樣background-color只能設定一個。
background-image:url1,url2,...,urlN;background-repeat : repeat1,repeat2,...,repeatN;backround-position : position1,position2,...,positionN;background-size : size1,size2,...,sizeN;background-attachment : attachment1,attachment2,...,attachmentN;background-clip : clip1,clip2,...,clipN;background-origin : origin1,origin2,...,originN;background-color : color;d、背景圖和漸層
漸層用法是這樣：background-image:linear-gradient(...);可見漸層是背景圖的一種特例，即用代碼產生了一張背景圖。瞭解更多漸層可參考《css3 Gradient背景》
既然漸層也是背景圖，在多重背景的時候當然可以用了。
.bg5{ background: url(img/bg_flower.gif) no-repeat,linear-gradient(to right,red ,green,blue) no-repeat;}<div class="bg5"></div>
總體來說，css3中新增的多重背景圖，選擇好的圖片，使用得當可以出奇制勝，達到意想不到的效果。
2、background-repeat對應背景圖的平鋪，必須說明一點：預設情況，背景圖在x軸和y軸平鋪，儘管起始於padding-box左上方，但是其各個方向朝外平鋪，延伸到border地區。這點很重要，在下面background-origin時也要說到。
a、css3增加到2個屬性值css3中，可以使用兩個repeat代替一個值。第一個為x軸，第二個為y軸。比如background-repeat: repeat no-repeat;和background-repeat: repeat-x;等價。
css2中背景圖的重複方式只有repeat，repeat效果就像貼瓷磚一樣，如果不能整數個整好放置，超出部分就被裁剪掉了。css3新增了space和round屬性值，在repeat基礎上對重複的過程做到更好的把控，盡善盡美。
b、css3新增屬性值space將背景圖在水平和垂直方向平鋪且不裁剪。左右對齊，中間填補空白，背景圖大小不變。
c、css3新增屬性值round將背景圖在水平和垂直方向平鋪且不裁剪。但是背景圖片可能被展開或縮短。
repeat，space和round對比舉例：
本來想找個合適的小點的圖片，沒找到，那就拿文章後面資源連結裡一個背景圖來舉例好了。
原作者的例子在這裡。
就是這隻羊，原圖資訊：
好大一隻羊，我在做demo時設定了background-size:100px 100px，這個屬性後面會介紹。
代碼：
<style>div{ width: 240px; height: 240px; border: 1px solid pink; display: inline-block; background-image: url(img/sheep.png); background-size: 100px 100px; background-color: green; color: red;}.repeat{ background-repeat: repeat;}.space{ background-repeat: space;}.round{ background-repeat: round;}.round1{ background-repeat: round; width:250px;}</style><body> <div class="repeat">repeat</div> <div class="space">space</div> <div class="round">round四舍</div> <div class="round1">round五入</div></body>
效果：
分析：
首先，我設定div的尺寸為240px*24px,img的尺寸為100px*100px。
repeat的情況，背景圖從左上方開始沿著x軸和y軸平鋪，背景圖大小不變，多餘被裁剪，如左1。
space的情況，240/100=2.4，放不下3個圖，因為space不裁剪，所以向下取整為2，所以x和y軸都有2張背景圖，且左右對齊，其餘空間空白，如左2。
round的情況，round這個詞很有意思，它有四捨五入的意思。round(240/100)=round(2.4)=2，所以就容納2張圖片，圖片尺寸放大，如右2。
如果設定div寬度為250，round(250/100)=round(2.5)=3，所以就容納3張圖片，圖片被縮小，如右1。
3、background-positioncss2中背景只能從左上方定位，css3的background-position增加到四個屬性值，可以對四個角都進行定位，而且可以取負值。
background-position取值的關鍵字有：top left center right bottom
按照取值個數舉例來說一下：
a、一個參數background-position: top;僅給定一個值，那麼第二個值將是"center"。
注意一個問題：給一個值，並不一定是設定background-position-x,要根據參數定。left center right自然是設定x軸，top center right是對應y軸。
b、兩個參數background-position:x% y%|x pos y pos|center center。
第一個設定x軸位移，第二個設定y軸位移，沒什麼好說的。
c、三個參數Note:設定3個或4個參數值時，位移量前面必須有關鍵字。就是說形如："10px bottom 20px" ，是錯誤的，因為10px前面沒有關鍵字。
MDN上background-position: 0px 0px, center;這樣的寫法顯然是錯誤的。
background-position: right 10px top;設定，水平靠右10px，垂直top。
d、四個參數background-position:right 10px bottom 10px;設定靠右下角水平垂直10px定位。
二、css3中新增屬性介紹css3中background新增了3個屬性:background-origin,background-clip和background-size。
1、background-originbackground-origin用來指定背景圖片定位在哪個盒子中。
個人觀點：background-origin是background-position的特例。都是表示背景圖放哪，background-origin特殊點，決定背景圖定位在哪個盒子中，相當於快速定位，你可以先通過background-origin定位到盒子，再通過background-position進行微調。
文法：
background-origin ： border-box | padding-box | content-box;
預設值：padding-box；
設定背景圖片原始起點位置，沒什麼好說的，只是有幾點需要注意：
a、repeat和origin關係如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。這句話是慕課網總結的，我得吐槽一下，背景repeat這個屬性是還是有效。請看下面例子。
<style type="text/css">div{ color: white; width: 100px; height: 100px; border: 20px dotted pink; padding:50px; background-color: yellow; background-image: url(img/wl.jpg) ; display: inline-block; vertical-align: top;}.origin-content{ background-origin: content-box;}.nopeat{ background-repeat: no-repeat;}</style><body><div></div><div class="origin-content nopeat">origin-content nopeat</div><div class="origin-content">origin-content</div></body>
分析：可見設定repeat時，先通過origin確定圖片位置，然後向各個方向朝外平鋪，延伸到border地區。在上面background-repeat時就說了：對於背景圖的平鋪，預設情況，背景圖在x軸和y軸平鋪，儘管起始於padding-box左上方，但是其各個方向朝外平鋪，延伸到border地區。現在origin只是改變了起始位置，
b、fixed和origin關係如果background-attachment屬性設定為"fixed"，background-origin將不起作用。
這個很好理解，因為fixed是相對於視口定位的，一個網頁只有一個視口，如果不理解請看《background-attachment屬性》
2、background-clip背景地區中背景圖片裁剪的位置。
文法：
background-clip ： border-box | padding-box | content-box | no-clip;
預設值：border-box。
如果理解比較抽象，就關注背景顏色，如果background-clip為content，背景顏色就不會填充padding和border，因為被裁剪掉了。
<style type="text/css">p { border: 10px navy; border-style: dotted double; margin: 1em; padding: 1em; background: #F8D575; } .bb{ background-clip: border-box; } .pb{ background-clip: padding-box; } .cb{ background-clip: content-box; }</style><body><p class="bb">內容background-clip: border-box;</p><p class="pb">內容background-clip: padding-box;</p><p class="cb">內容background-clip: content-box;</p></body>View Code 3、background-sizecss3新增了background-size允許背景圖被展開或者壓扁。在響應式設計裡很有用。
文法：
background-size: auto | <長度值> | <百分比> | cover | contain
參數：
auto:預設值，不改變背景圖片的原始高度和寬度。
<長度值>：成對出現如200px 50px,將背景圖片寬高依次設定為前面兩個值；當設定一個值時，將其作為圖片寬度值，高度被設定為"auto"，且高度等比縮放。
<百分比>：0%~100%之間的任意值，將背景圖片寬高依次設定為所在元素寬高【並不是圖片預設的寬高】乘以前面百分比得出的數值，一個值時，高度等比縮放。
cover:覆蓋，將背景圖片等比縮放以填滿整個容器。類似案頭背景中的平鋪。就是把圖片按比例擴充至足夠大，以使背景鋪滿盒子，如果圖片和容器的長寬比不同的話，背景映像的某些部分可能無法顯示出來。
contain:容納，即將背景圖片等比縮放至容器的寬或高被填充滿。有可能把映像放大後，依然鋪不滿盒子。
網上很多cover和contain的例子，但是講的很不明白。下面我舉個例子說明一下。
對比cover和contain舉例：
<style>div{ width: 150px; height: 60px; border: 1px solid pink; display: inline-block; background-image: url(img/bg.png); background-color: green; vertical-align: top; background-repeat: no-repeat;}.cover{ background-size: cover;}.contain{ background-size: contain;}</style><body><img src="img/bg.png">原始圖片尺寸：100px*50px<br/><br/><div class="cover"></div>div尺寸：150px*60px; <div style="width:150px;height:75px;background-size:cover;"></div>cover對應圖片尺寸：150px*75px;<br/><br/><div class="contain"></div>div尺寸：150px*60px; <div style="width:120px;height:60px;background-size:contain;"></div>contain對應圖片尺寸：120px*60px;<h3>背景圖片大小計算方法：</h3><h4>即cover和contain等比縮放比例的計算：</h4><p>150/100=1.5;60/50=1.2</p><p>cover取大，放大1.5倍。width:150px;height:75px;</p><p>contain取小，放大1.2倍。width:120px;height:60px;</p></body>View Code所以我個人覺得在使用cover和contain時把握住本質就是確定縮放比例，而不要去記憶那些複雜的規則。
三、資源連結background-clip
background-size
new repeating background image options in css3
how to resize background images with css3
w3c background shorthand
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
