什么是background？
一个元素的背景是在其content,padding和border下的内容（当然，在新的浏览器里可以通过使用background-clip属性改变背景所占用的区域）
background具有多种不同的属性
- background-color：设置元素的背景色
- background-image：为页面元素指定一个或多个背景图
- background-position：指定背景图片的初始位置
- background-repeat：指定背景图片是否以平铺效果重复出现，以及重复的方式
- background-attachment：决定背景是在视口中固定的还是随包含它的区块滚动的
- background: 将以上五个属性简写在一起
- background-size：设置背景图片大小
background-color
- background-color的默认值是transparent而不是white
- 该属性的使用务必要考虑到浏览器的兼容问题，在编写代码时最好先给一个基础的背景色再去设置比较鲜明的特点
举个例子
html
<p>我想拥有一个背景色</p>
CSS
p{
padding: 20px;
background-color: yellow;
}
以下为结果
background-image
background-image最简单的用法就是url(图片的路径)，这样就会选取一张图片插入到背景区域
p{
padding: 20px;
background-color: yellow;
background-image: url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png)
}
以下为结果
额，这个结果看起来并不是很好，背景图片看起来一直在重复且没有美感，这就需要利用以下的属性来修改
注：background只是背景而已，并不是网页内容的一部分，如果想让图片包含网页内容之中的话应该使用img标签
background-repeat
background-repeat的默认值是令图片在水平和垂直方向不断重复直至填满整个元素，其他的值包括
- no-repeat：图片不会重复显示，只会显示一次
- repeat-x：背景图片会沿着水平方向不断重复
- repeat-y：背景图片会沿着垂直方向不断重复
让我们来修饰代码
p{
padding: 20px;
background-color: yellow;
background-image: url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png);
background-repeat: no-repeat;
}
以下为结果
这样看起来似乎好一点了，但是背景图片确实覆盖了文本内容，我们可能需要将背景图片重新定一下位
background-position
一般来说，background-position将会取两个值，中间用空格隔开，他指定了图片的XY坐标——定位到图片左上角的点。想象这个背景是一张图片，X坐标从左到右，Y坐标从上到下
属性的取值大致有以下几种
- 绝对值类似像素，比如
background-position: 200px 25px; - 相对值类似rems，比如
background-position: 20rem 2.5rem - 百分比，比如
background-position: 90% 25% - 关键字，比如right center，这两个值比较直观，并且可以分别取左，中，右，和顶部，中部，底部的值
值得注意的是你也可以将这些值混合起来用，比如background-position: 99% center，同时如果只指定了一个值，那这个值代表水平的值，垂直方向的默认为center。
让我们再次修饰我们的代码
p{
padding: 20px;
background-color: yellow;
background-image: url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png);
background-repeat: no-repeat;
background-position: 99%;
}
以下为结果
background-attachment
background-attachment指定了当网页的内容滚动时背景如何滚动，他有以下的值
- scroll：背景图像会随着页面其余部分的滚动而移动
- fixed：当页面的其余部分滚动时，背景图像不会移动
- local：背景图像会随着页面其余部分的滚动而移动
- demo
这部分没搞懂...需要高人指点
background简写
在一条语句里面声明多种background属性是可行的，属性与属性之间应该用空格分隔开，比如
background: yellow linear-gradient(to bottom, orange, yellow) no-repeat left center scroll;
我们将我们以上分不同步骤写的代码用一条语句代替
p{
padding: 20px;
background: yellow url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png) no-repeat 99%
}
结果和之前的结果完全一样
简写的模板如下
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
background-size
background-size可以允许你修改背景图片的尺寸以更好的适用于你的设计，对于每一张图片，你需要2个参数：水平的和垂直的，例如
p{
padding: 20px;
background: yellow url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png) no-repeat 99% / 10%;
}
以下为结果
数值还可以是%和rems等,还可以是cover和contain
- px
- 第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto" - %
- 第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto" - cover
- 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
背景图像的某些部分也许无法显示在背景定位区域中 - contain
- 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
参考文章：
2015.8.16第一次更新
