## 設置元素的背景顏色 ~~~css background-color:#008000; ~~~ <br> ## 把圖像設置為背景 ~~~css background-image: url(圖片地址); ~~~ <br> ## 設置背景圖像是否及如何重復 ~~~css /* 默認重復 */ background-repeat: repeat; /* 背景圖像將在水平方向重復 */ background-repeat: repeat-x; /* 背景圖像將在垂直方向重復 */ background-repeat: repeat-y; /* 背景圖像將僅顯示一次 */ background-repeat: no-repeat; ~~~ <br> ## 設置背景圖像的起始位置 ~~~css /* 默認位置為左上角 0 0 */ background-position:0 0; ~~~ <table> <tbody><tr> <th width="200">值</th> <th>描述</th> </tr> <tr> <td> <ul> <li>top left</li> <li>top center</li> <li>top right</li> <li>center left</li> <li>center center</li> <li>center right</li> <li>bottom left</li> <li>bottom center</li> <li>bottom right</li> </ul> </td> <td> <p>如果您僅規定了一個關鍵詞，那么第二個值將是"center"。</p> <p>默認值：0% 0%。</p> </td> </tr> <tr> <td>x% y%</td> <td> <p>第一個值是水平位置，第二個值是垂直位置。</p> <p>左上角是 0% 0%。右下角是 100% 100%。</p> <p>如果您僅規定了一個值，另一個值將是 50%。</p> </td> </tr> <tr> <td>xpos ypos</td> <td> <p>第一個值是水平位置，第二個值是垂直位置。</p> <p>左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。</p> <p>如果您僅規定了一個值，另一個值將是50%。</p> <p>您可以混合使用 % 和 position 值。</p> </td> </tr> </tbody></table> <br> ## 復合樣式 ~~~css background: url(圖片地址) no-repeat center center; ~~~ <br> ## css sprites 精靈/雪碧圖 把圖標都放在一張圖上，然后利用背景圖定位鎖定圖標，這樣可以減少圖片請求次數，提升性能 <br>