一、背景属性
1. 背景颜色
使用background-color属性设置背景颜色
background-color: #ccc; 背景颜色为灰色
2. 背景图片
使用background-image属性设置背景图片
background-image: url(img/pic.gif); 设置背景图片为pic.gif
3. 背景图片平铺
使用background-repeat属性设置背景图片平铺方式
background-repeat: repeat 平铺（默认）
background-repeat: no-repeat 不平铺
background-repeat: repeat-x 沿x轴平铺
background-repeat: repeat-y 沿y轴平铺
图3-1背景图片平铺
图3-2 沿x轴平铺
图3-3 沿y轴平铺
背景平铺的作用很多哦，比如我们现在想设置这样一张400*300的图片作为背景：
图3-4 所需背景
可以看到这张图片的渐变是有规律的，我们完全可以把背景截成一张宽度为1px的图片，然后沿x轴平铺，达到同样效果。
图3-5 实际插入的背景 进行x轴平铺
遇到有规律的背景就可以利用平铺操作，在移动端还可以节省用户的流量哦。
4. 背景图片定位
使用background-position属性设置背景图片定位，如果背景图片平铺，那么这个位置即为第一张图片的位置，然后向对应方向平铺。
background-position: 两个值；
第一个值表示x轴的位置 第二个值表示y轴的位置
background-position: 一个值；
这个值表示x轴的位置 y轴默认是center
值可以采用的形式：
- left top right bottom center
- px
- %
5. 背景图片滚动
使用background-image属性设置背景图片背景图片是否跟随页面其他部分的滚动而滚动
background-attachment:fixed 不跟随其他部分的滚动而滚动（固定在某个位置）
background-attachment:scroll 跟随页面其他部分的滚动而滚动（默认）
选择一张图片作为body背景，放置于右上角不平铺，放置一个很长的div，使滚动条出现，来体验背景滚动：
css:
body{
background-image: url("opao.png");
background-repeat: no-repeat;
background-position:right top;
}
div{
width:100px;
height:1000px;
background-color: pink;
}
图1-1 滚动条出现
我们不写background-attachment的时候，默认是滚动的（scroll）
图1-2 滑动后背景向上滚动
当我们在body样式内加入background-attachment: fixed; 就不会滚动了哦！
body{
background-image: url("opao.png");
background-repeat: no-repeat;
background-position:right top;
background-attachment: fixed;
}
图1-3 背景不随其它元素滚动
二、复合写法
background: pink url(img/pic.gif) no-repeat right top fixed;
/*粉色 背景图片为pic.gif 不平铺 图片放于右上角 不滚动*/
顺序：颜色 背景图片 是否平铺 x轴位置 y轴位置 是否滚动
（背景和颜色至少写一个，其它可省略，默认为平铺，左上角，滚动）
