一、background屬性可以設定一個元素的背景樣式,當然前提是這個元素有具體的寬高值。
先來一個簡單的背景設定:
#show-box { width: 800px; height: 500px; background: #000; background-image: url(image url); } </style>
這裡只是簡單的設定了顏色和背景貼圖。
下面讓我們來看一下官方的background的屬性:
文法格式:
background: color position size repeat origin clip attachment image;
注意:如果同時設定了“position”和“size”兩個屬性,應該用左斜杠“/”,而不是用空格把兩個參數值隔開:“position/size”。
1 background: url("img.jpg") center center/100% 100% no-repeat;
屬性工作表(圖片可能會顯示得太小,請右鍵“在新標籤中開啟”以查看原圖):
1.color:背景顏色值。這個屬性會把整個元素添加顏色,而且處於最底層(在有背景圖片的情況下就可以看出)。
可選值:預設是透明,其他值可以通過查看“CSS顏色值表”來設定。
<style> #show-box { width: 180px; height: 180px; border: 20px dashed #000; background-color: #000000; background-color: blue; background-color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.8); } </style>
2.position:背景圖片的定位。如果沒有圖片設定,那麼這個屬性不起效果。
可選值:兩個參數,水平位置和垂直位置。如果只有一個值,第二個值為“center”。
預設值是元素的左上頂角。可以使用位置關鍵字(top,right,bottom,left,center)。百分比(以元素大小為基值)。像素值。
<style> #show-box { width: 180px; height: 180px; border: 20px dashed #000; background-position: center; background-position: center top; background-position: 0 100px; background-position: 10% 20%; } </style>
3.size:圖片尺寸。應用於圖片。
可選值:兩個數值,如果只有一個值,第二個值為auto。
預設是圖片自身大小。可以使用像素值,百分百(以元素大小為基值)。
cover:等比例縮放圖片,覆蓋這個元素。類似與windows中案頭背景的“填充”。
contain:等比例縮放圖片,適應元素的寬或者高。類似於windows中案頭背景的“適應”。
4.repeat:平鋪方式。
repeat:完全平鋪,複製圖片把整個元素填滿。(預設)
repeat-x:水平平鋪,在水平方向複製並平鋪。
repeat-y:垂直平鋪,在垂直方向複製並平鋪。
no-repeat:不平鋪,只使用一張圖片。
5.origin:背景的參考地區。
可選值:border-box,padding-box,content-box。
6.clip:背景的可視地區。
可選值:border-box,padding-box,content-box。
對比一下不同值的:
1.origin:border-box;clip:border-box;
<style> #show-box { width: 180px; height: 180px; margin: 20px; padding: 20px; border: 20px dashed #000; background: url("img.jpg") no-repeat border-box border-box; } </style>
2.origin:padding-box;clip:border-box;
<style> #show-box { width: 180px; height: 180px; margin: 20px; padding: 20px; border: 20px dashed #000; background: url("img.jpg") no-repeat padding-box border-box; } </style>
3.origin:content-box;clip:border-box;
<style> #show-box { width: 180px; height: 180px; margin: 20px; padding: 20px; border: 20px dashed #000; background: url("img.jpg") no-repeat content-box border-box; } </style>
4.origin:border-box;clip:content-box;
<style> #show-box { width: 180px; height: 180px; margin: 20px; padding: 20px; border: 20px dashed #000; background: url("img.jpg") no-repeat border-box content-box; } </style>
可以看出,origin設定的是位置,clip則會根據地區裁剪出背景圖片。
7.attachment:設定背景映像是否固定或者隨著頁面的其餘部分滾動。
預設值是scroll:背景圖片隨頁面的其餘部分滾動。fixed:背景映像是固定的。
8.多背景設定。
匯入圖片:background-image: url(image url);
二、多背景設定。
多背景的寫法:使用逗號“,”隔開,繼續寫背景屬性。
background: color position size repeat origin clip attachment image, color position size repeat origin clip attachment image;
也可以具體屬性單獨設定:background-image:url(image url 1),url(image url 2);
<style> #show-box { width: 180px; height: 180px; border: 20px dashed #000; background: url("img.jpg1") left top/100% 100% no-repeat, url("img.jpg2") left center/100% 100% no-repeat, url("img.jpg3") left bottom/100% 100% no-repeat, url("img.jpg4") center top/100% 100% no-repeat; } </style>
<style> #show-box { width: 180px; height: 180px; border: 20px dashed #000; background-image: url("img.jpg1"), url("img.jpg2"), url("img.jpg3"), url("img.jpg4"); background-position: left top, left center, left bottom, center top; background-size: 100%; background-repeat: no-repeat; } </style>