课程总结任务四-2 雪碧图（1）

前面的课程在学习的时候没有总结，现在开始补充。学过之后留下点痕迹还是好的。这是任务四中必须课第二个视频中的一个知识点雪碧图。

本节课的主要任务有：
（1）雪碧图
（2）滑动门
（3）CSS的渐变

一、雪碧图
http://blog.csdn.net/bingkingboy/article/details/51059209

（1）什么是雪碧图：

CSS雪碧（CSS Sprite）：是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分；

（2）雪碧图实现原理

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求的数量。这样的图片可以使用CSS background和background-position属性渲染。

（3）优缺点分析

优点：
* 减少加载网页图片时对服务器的请求次数。可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器请求的次数，降低服务器的压力。
* 提高页面的加载速度。由所需图片拼成的一张GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的GIF只有相关的一个色表，而单独分割的每一张GIF都有自己的一个色表，这就增加了总体的大小。

 * 减少鼠标滑过的一些bug。IE6不会主动预加载鼠标滑过 a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用雪碧图，由于一张图即可，所以不会出现这种现象。

缺点：
* 最大的问题是内存使用。除非这个雪碧图片是被非常小心的组织，你就会最终使用大量的无用的空白。

 * 影响浏览器的缩放功能。如果一个使用CSS雪碧的页面使用一些浏览器提供的整页缩放功能缩放了，浏览器就需要做一些额外的工作来纠正这些图片边缘的行为——基本上来说，是为了避免雪碧中相邻的图片被“露进来”。这对于小图片没有什么问题，但是对于大图片会是一个性能下降。

 * 拼图维护比较麻烦。

 * CSS编写变得困难。

 * CSS 雪碧调用的图片不能被打印。

（4）使用雪碧图前的知识点准备

 ** background：是个综合的写法，后面可以使用的属性就是下面的这些，两个属性之间使用空格隔开就可以了，但是注意的是position和size中间要用单斜线隔开，并且position在前面，size在后面。如果只有一个会被默认为是position

 ** background-image：指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
 url()来加载一个图片;也可以使用渐变创建背景图：background-image: linear-gradient(to top,#45B5DA,#0382AD);关于渐变的语法在渐变的部分会学习总结

 ** background-position：指定对象的背景图像位置。默认值：0% 0%，效果等同于 left top ；可以使用百分比，也可以使用length。

设置或检索对像的背景图像位置，必须先指定background-image属性。

center：背景图像横向和纵向居中
left：背景图形在横向上填充从左边开始
right: 背景的图像在横向上填充从右边开始
top:背景图像在纵向上填充从顶部开始
bottom:背景图像在纵向上填充从底部开始。

该属性提供2个参数值（left，top）（css3中以允许提供3，4个值）

如果提供3个或者4个，偏移量前必须有关键字。每个或偏移前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。
background:url(test1.jpg) no-repeat right 20px bottom 20px;

** background-size：指定对象的背景图像的尺寸大小。默认：auto

可是使用百分比，也可以是用length
auto:背景图像的真是大小
cover:将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器汇总

** background-repeat：指定对象的背景图像如何铺排填充。

默认是repeat。可参考的取值：
repeat-x:背景图像在横向上平铺；
repeat-y:背景图像在纵向上平铺；
repeat:背景图像在横向和纵向平铺；
no-repeat:背景图像不平铺；
round：背景对象自动缩放直到适应且填充满整个容器。
space：背景图像以相同的间距平铺且充满整个容器或某个方向.
如果在使用后面的两个的时候觉得效果不明显，可以注意下加载的图片的尺寸和div的宽高

** background-attachment：指定对象的背景图像是随对象内容滚动还是固定的。默认值：scroll。

取值：fixed:背景图像相对于窗体固定,元素滚动的时候，图片不随之滚动；

scroll：背景图是相对于元素自身固定，内容动时背景图也动。附加到元素的border。对于可以滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。

local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。对于可以滚动的元素（设置为overflow:scroll的元素）,设置background-attachment:local，则背景会随内容的滚动而滚动。因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。

** background-origin：指定对象的背景图像显示的原点

默认值：padding-box
padding-box:从padding区域（含有padding）开始显示背景图像；
border-box:从border区域（含border）开始显示背景图像
content-box:从content区域开始显示背景图像。

** background-clip：指定对象的背景图像向外裁剪的区域

padding-box：从padding区域（不含padding）开始向外裁剪背景
bordex-box:从border区域（不含border）开始向外裁剪背景
content-box:从content区域开始向外裁剪背景。
text:从前景内容的形状作为裁剪区域向外裁剪，如此即可实现使用

** background-color：指定对象的背景颜色。默认值是transparent。可使用#808080

多重背景图

<div class="test">
    定义多重背景图像
</div>
.test {
        width: 400px;
        height: 600px;
        /*第一个参数是url背景图片的地址，第二个是否重复repeat，第三个position定位，第四个size背景图像的尺寸，第五个裁剪的位置clip*/
        background: url(images/back.png) no-repeat 10px 20px/60px 100px padding-box, url(images/back.png) no-repeat 50px 60px/ 60px 100px padding-box, url(images/back.png) no-repeat 90px 100px /60px 100px padding-box, #aaa;
        /*如果只写了一个位置的10px 20px 会被默认为是position*/
        /*background: url(images/icon_vrShow.png) no-repeat 10px 20px padding-box,url(images/icon_vrShow.png) no-repeat 50px 60px padding-box,url(images/icon_vrShow.png) no-repeat 90px 100px  padding-box,#aaa;*/
    }

渐变色背景

<div class="gradient">
    使用渐变色绘制背景图像
    <p>渐变种类有: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient</p>
</div>

 .gradient p {
        height: 100px;
        background-image: linear-gradient(to top, #45B5DA, #0382AD);
    }

round

<div class="round">
</div>

 .round {
        width: 800px;
        height: 800px;
        background-image: url(images/1.png);
        background-repeat: space;
        background-color: #aaa;
    }

attach

<div class="attach">
    /p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
    <p>1内容超出会出现滚动条</p>
</div>

.attach {
        width: 200px;
        height: 300px;
        border: 1px solid red;
        background-image: url(images/1.png);
        background-repeat: no-repeat;
        background-attachment: scroll;
        /*overflow: scroll;*/
        line-height: 1.5;
    }

雪碧图

<div class="box">
    <span class="icon1"></span>
    <span class="icon2"></span>
    <span class="icon3"></span>
    <span class="icon4"></span>
    <span class="icon5"></span>
    <span class="icon6"></span>
    <span class="icon7"></span>
    <span class="icon8"></span>
</div>

.box{
        width: 500px;
        height: 300px;
        border: 3px solid red;
        background-color: yellow;  
    }
    span{
        display: inline-block;
        width: 92px;
        height: 92px;
        border: 1px solid black;
        background-image: url(images/2.jpg);
        background-repeat: no-repeat;
        margin: 5px;
    }
    span.icon1{
        background-position: -5px -5px;
    }
    span.icon2{
        background-position: -108px -5px;
    }
    span.icon3{
        background-position: -211px -5px;
    }
    span.icon4{
        background-position: -315px -5px;
    }
    span.icon5{
        background-position: -5px -105px;
    }
    span.icon6{
        background-position: -108px -105px;
    }
    span.icon7{
        background-position: -211px -105px;
    }
    span.icon8{
        background-position: -315px -105px;
    }

下载的雪碧图

执行界面

后续的会把剩余的两个知识点也总结出来。