background 是 css中的核心属性，我们对他应该充分了解。
background-image 定义背景图像 这个属性是我们用的最多的属性
设置背景图像有两个方式
background: url("img/01.jpg") ; 或者 background-image: url("img/01.jpg");
background-color 定义背景颜色 (三个属性）
属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。
1.currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，这是css3中新加的关键字 比如 ：border: 1px solid currentColor 是指当前标签所继承文字的颜色
http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/ 这个是currentColor 的具体描述 。
2. transparent 尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。
3. inherit是继承,继承块中的颜色 （这个具体的用法我也不清楚，基本上没有用过。）
background-origin 指定背景的显示区域
该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置，你可以用这个属性在边框上绘制背景，
1. padding-box 背景图像相对于内边距框来定位。
.box {
width: 300px;
height: 400px;
background: url("im/1.jpg") no-repeat;
background-origin: border-box;
padding: 50px;
border: 50px solid orange;
margin: auto;
margin-top: 100px;
}
2. border－box 背景图相对于边框盒来定位。
.box {
width: 300px;
height: 400px;
background: url("im/1.jpg") no-repeat;
background-origin: border-box;
padding: 50px;
border: 50px solid orange;
margin: auto;
margin-top: 100px;
}
3. content－box 背景图像相对于内容框来定位。
.box {
width: 300px;
height: 400px;
background: url("im/1.jpg") no-repeat;
background-origin: content-box;
padding: 50px;
border: 50px solid orange;
margin: auto;
margin-top: 100px;
}
background-clip 指定背景的裁剪区域
该属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。
如果它的值为border,则背景在元素的边框、补白和内容区域都会显示；如果值为padding,则背景只会在补白和内容区域显示；如果值为content，则背景只会在内容区域显示。
1.padding-box 从padding区域向外剪裁背景
.box {
width: 300px;
height: 300px;
background: url("im/1.jpg") no-repeat;
background-clip: padding-box;
background-origin: padding-box;
padding: 50px;
border: 50px dashed orange;
margin: auto;
margin-top: 100px;
}
2.border-box 从border区域向外剪裁背景
.box {
width: 300px;
height: 300px;
background: url("im/1.jpg") no-repeat;
background-clip: border-box;;
background-origin: padding-box;
padding: 50px;
border: 50px dashed orange;
margin: auto;
margin-top: 100px;
}
3.content-box 从content区域向外剪裁背景
.box {
width: 300px;
height: 300px;
background: url("im/1.jpg") no-repeat;
background-clip: content-box;
background-origin: padding-box;
padding: 50px;
border: 50px dashed orange;
margin: auto;
margin-top: 100px;
}
background-repeat 设置背景图片是否及其如何重复铺排
1. repeat: 平铺整个页面,左右与上下
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:repeat;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
2. repeat-x: 在x轴上平铺,左右
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:repeat-x;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
3. repeat-y: 在y轴上平铺,上下
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:repeat-y;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
4. no-repeat: 图片不重复
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:no-repeat;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
background-size 定义背景图片的大小
1. 初始值 auto
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg")no-repeat;
background-size: auto;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
2. cover 保持背景图像本身的宽高比例，将图片缩放到正好完全覆盖所定义背景区域。
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg")no-repeat;
background-size: cover;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
3. contain 保持图像 本身的宽高比例，将图片缩放到宽度或高度正好适应所定义背景的区域。
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg")no-repeat;
background-size:contain;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
background-position 设置背景图片的位置
1. 最主要使用在 一张png 上有多个logo 或者 ico 这个时候就用到background-position了
2. background-position: 15px 20px;(指将图片向右移15px,向下移20px;) 就是以图片的左上角顶点为原点，往下和右都为正，反之为负，
3. background-position : centen centen 靠右居中。
background-attachment 定义背景图像的显示方式
1. scroll: 随着页面的滚动轴背景图片将移动
背景图是相对于元素自身固定，内容动时背景图也动,附加到元素的border
2. fixed: 随着页面的滚动轴背景图片不会移动
背景图片相对于视口固定，就算元素有了滚动条，背景图也不随内容移动。
3. local : 则背景会随内容的滚动而滚动。
因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。
div{
width: 200px;
height: 350px;
border: 1px solid red;
background-image: url("im/1.jpg");
background-repeat: no-repeat;
background-attachment: local;
overflow: scroll;
line-height: 1.5;
}
</style>
</head>
<body>
<div>
1内容超出会出现滚动条
2内容超出会出现滚动条
3内容超出会出现滚动条
4内容超出会出现滚动条
5内容超出会出现滚动条
6内容超出会出现滚动条
7内容超出会出现滚动条
8内容超出会出现滚动条
9内容超出会出现滚动条
10内容超出会出现滚动条
11内容超出会出现滚动条
12内容超出会出现滚动条
13内容超出会出现滚动条
14内容超出会出现滚动条
15内容超出会出现滚动条
16内容超出会出现滚动条
17内容超出会出现滚动条
18内容超出会出现滚动条
19内容超出会出现滚动条
20内容超出会出现滚动条
</div>
</body>
