本课要点：

一、 CSS Sprite （重点）

1、原理解析

    有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。

显示Sprite的条件：

1）需要一个设置好宽和高的容器

2）需要设置background-position（背景图像的起始位置）的值，这个属性的默认值为（0，0），也就是容器的左上角，我们需要重设背景图像的起始位置，使我们需要显示的图像正好落在容器上。即移动图片到自己想要的图标位置。（难点）

2．优缺点

优点：

        把多个背景图片整合到一张图片内，当页面加载时可以大大减少HTTP请求的次数，减轻服务器的压力。

缺点：

        要精确定位每个背景元素的位置；

         在自适应页面环境下可能出现背景断裂现象；

        维护困难；

3.例题

要在小蓝框里显示小火箭为背景，

background: url(Sprit_bg.png) no-repeat;

background-position: -200px -200px;

二、CSS3渐变

使用CSS3制作的渐变效果，支持无极缩放，但仅适用于Webkit和Gecko引擎的浏览器，在使用过程中要添加不同的前缀。  -webkit-    和    -moz-

1、渐变语法

（1）线性渐变  

gradient(渐变类型，渐变起点，渐变终点，开始颜色，结束颜色，位置偏移量 停靠颜色值）

 

background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue), color-stop(0.5, yellow));

（2）径向渐变

gradient(渐变类型，内圆心坐标，内圆半径，外圆心坐标，外圆半径，）

background: -webkit-gradient(radial, 125 125, 10, 125 125, 150, from(rgba(255,0,0,1)), to(rgba(255,0,0,0.5)));