第十七章 CSS边框与背景【下】
一、设置背景
属性 值 说明 CSS版本
background-color 颜色 背景的颜色 1
background-image none或url 背景的图片 1/3
background-repeat 样式名称 背景图片的样式 1/3
background-size 长度值或其他 背景图像的尺寸 3
background-position 位置坐标 背景图片的位置 1
background-attachment 滚动方式 背景图片的滚动 1/3
background-clip 裁剪方式 背景图片的裁剪 3
background-origin 位置坐标 背景图片起始点 3
background 复合值 背景图片简写方式 1
1、background-color：
值 说明 CSS版本
（1）颜色 ：设置背景颜色为指定颜色 1
（2）transparent (使用频率低)：设置背景颜色为透明色 1
2、background-image：
（1）none ：取消背景图片的设置 1
（2）url : 通过URL设置背景图片 1
例、body{
background-image：url（图片位置）；
}
3、background-repeat：
（1）repeat-x : 水平方向平铺图像 1
（2）repeat-y : 垂直方向平铺图像 1
（3）repeat : 水平和垂直方向同时平铺 1
（4）no-repeat: 禁止平铺图像 1
4、background-position
（1）top :将背景图片定位到元素顶部 1
（2）left :将背景图片定位到元素左部 1
（3）right :将背景图片定位到元素右部 1
（4）bottom :将背景图片定位到元素底部 1
（5）center :将背景图片定位到元素中部 1
（6）长度值 :使用长度值偏移图片的位置 1
（7）百分数 :使用百分数偏移图片的位置 1
5、background-size ：
（1）auto ：默认值，图片以本尺寸显示 3
（2）cover ：等比例缩放图片，使图像至少覆盖容器，但有可能超出容器 3
（3）contain：等比例缩放图像，使其宽度，高度中较大者与容器与横向或纵向重合 3
（4）长度值 ：CSS长度值，比如px、em 3
（5）百分数 ：比如 100% 3
6、background-attachment：
（1）scroll :默认值，背景固定在元素上，不会随着内容一起滚动 1
（2）fixed :背景固定在视窗上，内容滚动时背景不动 1
7、background-clip：（设置背景起始点）
（1）border-box :在元素盒子内绘制背景 3
（2）padding-box:在内边距盒子内部绘制背景 3
（3）content-box:在内容盒子内部绘制背景 3
8、background-origin
（1）border-box :在元素盒子内裁剪背景 3
（2）padding-box:在内边距盒子内部裁剪背景 （渗进边框里的背景会被裁掉） 3
（3）content-box:在内容盒子内部裁剪背景 3
9、background
例、div{
width:400px;
height:300px;
border:10px deshed red;
* padding:50px;
****** background: silver url(img.png) no-repeat top left /100% border-box centent-box;
* 背景颜色 背景图片 平铺方式 对齐方式 大小 渗进边框 内容区显示
}
解释：完整的简写顺序
[background-color]
[background-image]
[background-repeat]
