一、背景
1.背景颜色 background-color： ;
关于背景颜色有一个值为 opacity
opacity属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：
例1：
div {
background-color: green;
opacity: 0.3;
}例2：
div { background: rgba(0, 128, 0, 0.3) / }
2.背景图片 background-image: ;
如果设置背景图片比盒子设置的宽度和高度小，那么背景图片就会在水平和垂直方向都重复平铺在盒子里
加多重背景兼容性不太好
（记得使用图片时，使用不会干扰文本的图像哦！）
p {
background-image: url("01.gif");
}3. 背景重复 background-repeat
默认是背景图片重复平铺在盒子里
| repeat-x | 水平方向重复 |
| repeat-y | 垂直方向重复 |
| no-repeat | 不重复，只显示一次 |
4.背景图片位置 background-position
background-position ：值1 值2；
值1是x轴坐标 值2是y轴坐标
单位：
| background-position ：right top；（默认）右上角 | 方位 | 等价于background-position ： 0 0； |
| background-position ：值1 值2； | 像素 | 距离左侧，上侧多少像素 |
| background-position ：50% 50%； | 百分比 | =background-position ：center center； |
| 如果只写了一个值，第二个值默认值center或者是50% | ||
5.背景图片大小 background-size
css3新增元素，如果不兼容的话要加前缀
background-size：值1 值2；
值1代表背景图片的宽度，值2代表背景图片的高度
单位：
| background-size：50% 100% | 百分比 |
| background-size：400px 500px | 数值（px） |
| .background-size：cover | 把背景图等比例像扩展至最大尺寸，以使背景图像完全覆盖背景区域（可能会裁剪图片） |
| background-size：contain | 把背景图等比例像扩展至最大尺寸，以使背景图片高度和宽度完全适应内容区域（可能会出现背景区域留白） 等价于background-size：100% |
| 如果只设置了一个值，是宽度，那么高度会随着宽度的变化而变化 | |
6.background-origin 定义背景图片的渲染位置
border-box 边框盒子 背景图片从边框开始控制渲染
padding-box 背景图片从内边距开始控制渲染
content-box 背景图片从内容开始控制渲染
7.background-attachment 定义背景图片是否固定或者随着页面的其余部分滚动
background-attachment ：fixed 固定 图片固定在页面上，不随着内容的滚动而滚动
background-attachment ：scroll 默认 背景图像随页面的其余部分一起滚动
7. 背景简写
提问！都有哪些属性值可以简写
在前面的博客里提到了font值，padding值，margin值 都可以简写，当然背景也可以啦
之前：
body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}简写之后：
background : #ffffff url("tree.png") no-repeat right top / 500px fixed ;
如此一来是不是让代码看起来不那么冗长，简单明了
没有先后顺序，空格隔开
位置在前，大小在后， 位置和大小之间用 / 隔开
- background-color 背景颜色
- background-image 背景图片
- background-repeat 背景图片是否重复
- background-position 背景定位
- background-size 背景大小
- background-attachment 背景图片是否滚动