前言：背景样式在css3样式家庭中占据非常重要的地位，在日常开发中背景样式的使用非常常见，这也是我们强调一定要理解和掌握背景样式使用的原因。
常见的背景属性一共有以下八个，我们会在卡其漫画的实现过程中讲解其中的几个。
我们也不需要就关注所有这些样式的作用，我们从为div成功添加一个背景颜色开始慢慢来学习这些样式的作用和使用方式。那么我们首先就需要来了解background-color的使用了。
顾名思义，background-color可以用来设置背景颜色,它的语法 非常简单：background-color:颜色;
其它不说，先上代码
div {
width: 600px;
height: 300px;
border: 20px solid rgba(0, 0, 0, 0.6);
padding: 20px;
/* 设置元素的背景色 */
background-color: red;
}通过上面的图可以看到，背景颜色的区域包含了当前元素的border和padding的区域，这个特性在后期添加背景图片的时候也是适用的。
background-image属性通过url设置一个元素的背景图像。这里需要关注的是元素的背景占据的区域是元素的总大小，包括填充(padding)和边框(border)（但不包括边距），和background-color的特性完全一样。
div {
width: 600px;
height: 300px;
border: 20px solid rgba(0, 0, 0, 0.3);
padding: 20px;
background-image: url('./images/32x(1).jpg')
}说明：url中指定你想做为背景的图片的路径，可以是相对路径也可以是绝对路径
(附上完整素材图片)
从上面的效果中我们可以得到默认情况下背景样式的两个特点：
1.背景样式并不会改变素材的大小，背景是从容器的左上角的padding位置做为参考原点开始放置的
2.背景图片默认会平铺，垂直和水平方向都会平铺(重复)
我们来看第一个问题，背景图片的放置有默认的参数，很明显是参照容器的padding位置，如果我们想改变这个参照，就可以使用background-origin来实现了。background-origin是用来决定图片的原始起始参照位置，即你可以选择背景图片是从内容区域开始显示，还是padding区域，或者border位置(我们应该还记得一个元素从外到内依次为border,padding,content).它的设置如下：
background-origin:border-box;//背景从border位置开始放置
background-origin:padding-box://背景从padding位置开始放置-默认值
background-origin:content-box;//背景从内容位置开始放置我们来简单的测试一下：
| 代码设置 | 效果 |
|---|---|
| div {
width: 600px; height: 300px; border: 20px solid rgba(235, 143, 143, 0.3); padding: 20px; background-image: url('./images/32x(1).jpg'); background-origin: border-box; } | |
| div {
width: 600px; height: 300px; border: 20px solid rgba(235, 143, 143, 0.3); padding: 20px; background-image: url('./images/32x(1).jpg'); background-origin: padding-box; } | |
| div {
width: 600px; height: 300px; border: 20px solid rgba(235, 143, 143, 0.3); padding: 20px; background-image: url('./images/32x(1).jpg'); background-origin: content-box; } |
通过测试可以看到：当background-origin的值为content-box时，首先会让背景图片的左上角和内容边缘左上角对齐；为padding-box时，则会让背景图片的左上角和内间距padding的左上角对齐;为border-box时，则会让背景图片的左上角和border的左上角对齐。可见background-origin的值的确是决定背景图片开始从哪个区域开始显示.
第二个问题就关系到背景图上的平铺设置了。在背景样式中通过background-repeat来实现设置背景图如何平铺(重复)。
background-repeat:repeat; // 背景图像将向垂直和水平方向重复--默认值
background-repeat:repeat-x // 背景图像在水平方向重复
background-repeat:repeat-y // 背景图像在垂直方向重复
background-repeat:no-repeat // 背景图像不重复简单的演示一下：
| 代码 | 效果 |
|---|---|
| div {
width: 600px; height: 300px; border: 20px solid rgba(235, 143, 143, 0.3); padding: 20px; background-image: url('./images/32x(1).jpg'); // 设置背景图像不重复 background-repeat: no-repeat; } |
说到这里，我们已经大致能够使用背景样式来实现一些效果了...但是等等，我们为什么要使用背景样式啊？不是有img标签嘛！！
这就是问题的关键了，不是所有场景使用img标签都适合，下面就使用一个具体的需求场景来说明这个问题。
在以后真实的开发场景中，有时候为了素材在不同场合的通用性，美工可能会制作一个比较大的图片素材供你使用。如，上面那个效果中的图片的实际大小：
如果直接使用img标签来加载这个图片，那就出问题了，这个宽度已经远远大于我们实际需要的大小：
肯定有小伙伴说，你可以添加样式来设置img的大小啊！！这个想法很正常，但是它有几个严肃的问题需要考虑：
1.设置的大小会不会改变原始图片的比例，如果宽高比例不一致，势必造成图片的变形，你想承受这样的结果吗？
2.如果容器大小改变，设置的图片大小势必也需要有相应的变化，这不利于代码的通用性。
怎么解决？大家应该想到了！！使用背景样式来解决。在这个案例中我们还会看到其它的一些背景样式的使用，让我们马上开始吧~~
首先我们按需要创建容器，接下来我们要为容器设置背景样式了：
.main_left_top{
width: 100%;
height: 380px;
background-image: url('./images/banner_long.jpg');
}这个样式的效果为：
容器没有设置border和padding,所以图片从容器左上角开始放置，图片也没有改变容器的大小。但是很明显有问题了，这不是我们想要的效果。我们想要什么？
1.至少内容居中显示，素材中的人物是我想展示的重点，我希望人物能够居中(水平垂直都居中)显示
2.我还希望容器大小改变的时候，不用再重新修改样式的同时保持一致的效果(居中显示)
问题一个一个来解决，我们首先介绍background-position,这个样式一看就能知道是设置背景图片的位置的。
// 语法 background-position:关键字 | % | px
-------------------------------------------
说明：每种类型的值都包含两个部分，第一个部分代表x方向(水平方向)，第二个部分代表y方向(垂直方向)
1. 关键字：left(左)|center(中)|right(右) top(上)|center(中)|bottom(下),如果只指定一个关键字，
第二个默认为center
2. %：参照容器宽高。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 默认值
为：0％ 0％
3. px:参照容器左上角。左上角是(0 0),如果仅指定了一个值，第二个值将默认是50％于是我们可以添加background-position样式来实现背景图片的居中显示
.main_left_top{
width: 100%;
height: 300px;
background-image: url('./images/banner_long.jpg');
/* 设置背景样式的水平垂直居中 */
background-position: center center;
}乍一看，挺不错，再仔细一看，哎，怎么脚都没有看到了，明明素材中人物是全身照啊。什么原因呢？这是因为图片的原始高度为471px,而容器的高度为380px.怎么样才能将主体的内容完整的显示出来呢？这个时候就需要使用到背景样式中的background-size了。
background-size样式从名字上看就能知道它的作用是用来背景图像的大小，当素材大小与容器大小不一致的时候，通常就可以使用这个样式进行背景大小的调整，以满足我们的需要。它的语法：background-size:length|cover|contain|percentage
参数说明：
length:设置背景图片高度和宽度。第一个值设置宽度，第二个值设置高度，如果只设置一个值，第二个是设置为
auto(自动)
cover:此时会保持图像的纵横比例并将图像缩放成将完全覆盖背景定位区域的最小大小。例如，如果高比宽小，那么
就对图片进行缩放直到高度范围刚好完整覆盖容器，注意，它有可能会造成素材的某些区域不可见哦
contain:此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小，说白了，就是让素材等比例缩
放，以完整的呈现在容器中，这样有可能造成容器的某些区域空白(不平铺的情况下)或者重复(默认平铺的情况下)
percentage:将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，
第二个是设置为"auto(自动)"，它是参照容器的宽高在当前应用场景中，我们的素材图片的宽高都超出了容器的宽高，宽度更是远远超出容器的宽度，为了让图片能够完全填充满容器，同时不会留白或者平铺，我们可以选择使用cover来实现我们想要的效果：
.main_left_top{
width: 100%;
height: 300px;
background-image: url('./images/banner_long.jpg');
/* 设置背景样式的水平垂直居中 */
background-position: center center;
/* 设置背景图片的大小 */
background-size: cover;
}
这样做还有一个好处：当容器宽度变化的时候，背景依然可以居中显示，并且主体内容完美的呈现，这样就达到了我们想要的效果了。
在以后的页面制作过程中，还有一个页面效果也经常使用到背景样式，这个效果的实现更加综合的运用了背景样式。
乍一看，这个效果很简单，不就是加个图片吗？但是我们需要考虑到里面的细节，就是这个素材是一个精灵图（图如下）
补充说明：精灵图
概念：css精灵图(CSS sprites),是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个
大的图片中
好处：
1.减少对浏览器的请求次数，省得每次都需要重新向服务器发送资源请求，这样处理就可以减少服务喊叫的响应
次数，避免网页的延迟
2.方便小图标的统一管理，否则需要的素材太过零散，不利于后期的管理
有人可能要问了，这有什么问题呢？
问题还是有的，我们一个一个来看。我们先使用常规的方式来实现这个背景样式：
元素基本样式：
.newone{
width: 30px;
height: 30px;
float: left;
// 这里为了能够看清楚原始的元素，添加了背景颜色
background: #eee;
}
添加背景样式
.newone{
width: 30px;
height: 30px;
float: left;
background: #eee;
// 添加背景样式
background-image: url('../images/newicon_20160225.png');
// 由于素材比我们需要的大(二倍图，这个概念以后会讲)，所以进行背景图片大小的设置
background-size: 75px 150px;
// 设置背景图上的位置，让其能够显示我们想要的部分
background-position: -60px -114px;
}
我们可以看到，效果好像不如我们相像的那样(显示的内容太多了)。这是因为元素的大小比我们真正要展示的图片部分大小要大，造成其它我们不想要的内容也呈现在元素范围内了。所以我们想指定背景只保留出现在某个区域，这个问题要解决就需要我们使用到background-clip了。我们先来看一下background-clip的样式属性值
background-clip:border-box;//保留border及border范围以内的背景内容
background-clip:padding-box;//保留padding及padding以内的背景内容
background-clip:content-box;//保留content的背景内容
clip这个单词的意思是裁剪，剪切。所以这个样式的特性我们可以用一句话来形容：设置的是裁切，控制的是保留显示，什么意思呢，比如，你设置的是padding-box,其实不是要裁切掉padding及范围内的内容，而是需要保留显示padding及范围以内的内容，这就是所谓的设置的是裁切，控制的是显示的含义了。
明白了这个之后，我们可以先为元素设置合适的padding,使用background-clip,再配合其它样式，就能实现我们想要的效果了：
.newone{
width: 30px;
height: 30px;
float: left;
background: #eee;
// 添加背景样式
background-image: url('../images/newicon_20160225.png');
// 由于素材比我们需要的大(二倍图，这个概念以后会讲)，所以进行背景图片大小的设置
background-size: 75px 150px;
// 设置背景图上的位置，让其能够显示我们想要的部分
background-position: -60px -114px;
// 为元素添加padding
padding: 7px;
// 为元素设置盒模型，否则padding的设置会让元素增加大小
box-sizing: border-box;
// 设置保留内容区域的背景
background-clip: content-box;
// 让背景从内容区域开始放置
background-origin: content-box;
}
去掉背景色，就OK了！！
到目前为止，我们通过卡其漫画的具体的页面需求，详细讲解了几个背景样式的特性及使用方式，这些样式在平时的页面制作中使用很频繁，我们需要多加练习，更深的领悟这些样式的细节，以便能够写出更优雅的样式代码，实现丰富的页面效果。
