CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 |属性| 作用 | | --- | --- | | background-color | 背景颜色 | | background-image | 背景图片地址 | | background-repeat | 是否平铺 | | background-position | 背景位置 | | background-attachment | 背景固定还是滚动 | | 背景的合写（复合属性）| `background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置` | [TOC] ## 1. 背景图片(image) 语法： ```css background-image : none | url (url) /* 提倡 背景图片后面的地址，url不要加引号 */ ``` `background-image` 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景），可以和 `background-color `连用。 如果图片不重复地话，图片覆盖不到的地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。 <br/> ## 2. 背景平铺（repeat） 语法： ```css background-repeat : repeat | no-repeat | repeat-x | repeat-y ``` 参数： repeat : 　背景图像在纵向和横向上平铺（默认的） no-repeat : 　背景图像不平铺 repeat-x : 　背景图像在横向上平铺 repeat-y : 　背景图像在纵向平铺 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素：  <br/> ## 3. 背景位置(position) 语法： ```css background-position : x y; /* x, y可以是像素、%、方位名词top left right bottom */ ``` * 设置背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。 * 如果精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。 实际工作用的最多的，就是背景图片居中对齐了。 <br/> ## 4. 背景附着 语法： ```css background-attachment : scroll | fixed ``` scroll : 　背景图像是随对象内容滚动 ， fixed : 　背景图像固定。<br/> <br/> ## 5. 背景简写 background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写： ```css background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 ``` <br/> ## 6. 背景透明 CSS3支持背景透明的写法语法格式是: ```css background: rgba(0,0,0,0.3); ``` 最后一个参数是alpha 透明度 取值范围 0~1之间 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。