三、精靈圖（雪碧圖）
四、設定背景圖的大小
五、復合屬性background
背景顏色，缺省會填充盒子的內容區域，padding區域，邊框區域。並不會填充margin區域。
background-color: 單詞/16進製制/rgb函式/rgba函式/transparent
background-image: url函式 url函式中圖上的路徑可以加"" 也可以不加。
背景，填充了內容區域，padding區域，邊框區域。
預設情況下，的左上角和盒子的padding的左上角是對齊的。
預設情況下，一張，作為盒子的背景，是不壓縮，不變形，本身多大，放在盒子中還是多大。
如果盒子小，大，盒子中只能顯示的一部分。如果盒子大，小，一張，肯定會完整顯示，並且會平鋪。
如果比較小，它會沿著x軸和y軸都進行平鋪。
background-repeat:
repeat 平鋪 預設就是平鋪
no-repeat 不平鋪 如果不平鋪的話，邊框上也沒有背景
repeat-x x軸平鋪
repeat-y y軸平鋪
如果不平鋪，的左上角和盒子的padding的左上角是對齊的。
預設位置：的左上角和盒子的padding的左上角是對齊的。
設定：background-position：0 0 第1個0表示x軸座標 第2個0表示y軸座標 00表示原點
x值和y值可以寫乙個畫素值，如：
background-position: 93px 68px;
除了寫畫素值之外，也可以寫單詞：
x：left center right，y: top center bottom。
還可以寫百分比：
x:0% 50% 100%，y:0% 50% 100%
問：請求是越多越好嗎？
答：不是的 請求越少越好
問：盒子是小盒子，裡面需要放乙個小圖，但是我們得到的是乙個精靈圖，如何放？
答：backgroud-postion
**如下（示例）：
<
!doctype html>
"en"
>
"utf-8"
>
document<
/title>
*.box1
.box2
<
/style>
<
/head>
"box1"
>
<
/div>
"box2"
>
<
/div>
<
/body>
<
/html>精靈圖（雪碧圖）示例：
結果：
預設情況下，作為盒子的背景圖，是不放大，也不縮小，原本是多大，還是多大。可以通過background-size來設定背景圖的大小。
格式：background-size:100px 100px; 第1個值代表寬度，第2個值代表高度。
單位也可以是百分比，background-size:50% 50%； 這裡的50%是width和padding之和的50%。
後面還有特殊值：
原圖效果：
（2）contain 把背景圖擴充套件足夠大,直到高度或寬度撐滿整個盒子，圖上是完整顯示的，盒子中的某些區域可能沒有被覆蓋掉。
contain效果：
使用background屬性，順序如下：
background-color
background-image
background-repeat
background-attachment
background-position
css 背景 盒子模型 背景大小
背景 background color 背景顏色 十六進製制 rgbrgba a的取值0 1 background image 背景 url 位置 加 會有提示,不加沒有提示 background repeat 背景是否平鋪滿 no repeat 不平鋪滿 repeat x 在x軸平鋪滿 repea...
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...