## 设置元素的背景颜色 ~~~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>