[TOC] >[info] CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。 ### 1、背景色 >[danger]可以使用 background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。 这条规则把元素的背景设置为灰色： ~~~ p {background-color: gray;} p {background-color: #fff;} p {background-color: rgb(0,0,0);} p {background-color: rga(0,0,0,0);} ~~~ ### 2、背景图像 >[danger]要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。 如果需要设置一个背景图像，必须为这个属性设置一个 URL 值： ~~~ body {background-image: url(/i/eg_bg_04.gif);} ~~~ ### 3、 背景重复 >[danger]如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。 属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。 默认地，背景图像将从一个元素的左上角开始。请看下面的例子 ~~~ body{ background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; } ~~~ ### 4、背景定位(图片精灵) >[danger]可以利用 background-position 属性改变图像在背景中的位置。 下面的例子在 body 元素中将一个背景图像居中放置： ~~~ body { background-image:url("/i/eg_bg_03.gif"); background-repeat:no-repeat; background-position:center; /*位置(top,center,bottom,right,left)*/ /*百分数值(50% 50%;)*/ /*长度值(50px 100px)*/ } ~~~ ### 5、css背景缩写 ~~~ <style type="text/css"> p{background: #fff url() 0 0 no-repeat;} </style> ~~~ >[danger]**作业：**通过背景精灵，完成京东右下角工具导航的布局。