精灵图（css sprites）

目录

一、什么是精灵图？

二、精灵图的优点

三、精灵图的缺点

四、精灵图的基本用法

五、 background-position

六、渐变

1、线性渐变

2、径向渐变 

---

一、什么是精灵图？

所谓精灵图就是图片拼合技术，把很多的小图片合并到一张较大的图片里，通过css中的background-position属性，显示精灵图中某一个小图标。

二、精灵图的优点

       在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。

        采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。
       使用精灵图可以有效减少服务器接收和发送请求的次数，从而达到提高页面的加载性能。

减少HTTP请求数，提高页面加载速度；

增加图片信息重复度，提高压缩比，减少图片大小；

更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。

三、精灵图的缺点

图片合并麻烦；维护麻烦，修改一个图片可能需要从新布局整个图片，样式。

四、精灵图的基本用法

1、工具：PS、HBuilder/VS Code
2、素材：任意一张精灵图都行。打开ps导入精灵图
3、测量字母的大小及坐标。

（1）通过矩形选框工具，测量字母的大小，并将div的大小设置为字母的大小。
（2）打开窗口菜单栏中的信息，可以查询字母width、height、x轴和y轴的信息。
（3）将鼠标光标移动到字母的左上角位置，通过右侧的信息面板测出x和y的值。

4、在css中编写style样式，通过background-position定位到字母所在的位置。 

总结：雪碧图的使用步骤：

            1、先确定好使用的图标

            2、测量图标的大小

            3、根据测量的结果，创建一个元素

            4、将雪碧图设置为元素的背景

            5、设置一个偏移量以显示正确的图片

五、 background-position

background-position 可以调整背景图像的位置，三种方式可以设置位置

使用关键字：

background-position: left top;
background-position: right;
background-position: top;
/* left right center*/
/* top bottom center*/

通过长度设置图像左上角在元素上的坐标：

background-position: 100px 20px;
background-position： 20px; /* 20px center */

使用百分比设置背景图像位置：

background-position: 30% 30%;
/* 背景图像上 30%，30%的点 与 元素上 30%，30% 的点重合 */

六、渐变

  作用：让元素在两个或多个指定的颜色之间显示平稳的过渡。

           渐变更像一种图片，通过background-image设置

   种类：分为线性渐变与径向渐变

1、线性渐变

      （1）向下/向上/向左/向右/对角方向

      语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction属性值：

属性值	作用
to bottom	默认值，从上到下
to top	从左到右
to left	从右到左
to right	从左到右
to bottom right	从左上到右下

其中对角有四个属性值，分别为左上、左下、右上、右下等。

 实例：

 background-image: linear-gradient(red,yellow,green);

2、径向渐变 

语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

（1）shape传入渐变形状

属性值	作用
ellipse	默认值，椭圆形
circle	圆形

（2）size传入渐变大小

属性值	作用
farthest-corner	默认值，指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side	指定径向渐变的半径长度为从圆心到离圆心最远的边
closest-side	指定径向渐变的半径长度为从圆心到离圆心最近的边
具体数值或百分比	一个值表示半径大小，两个值表示椭圆形渐变的长半轴和短半轴

 

注意：若渐变形状为圆形，则该渐变大小不能为百分数，而椭圆既可以为具体数值也可以为百分数 ，个人认为或许是因为圆形半径若为百分数的话就无法确定是以元素的宽为标准还是以高为标准了。

（3）at position传入渐变圆心位置

属性值	作用
center	默认值，表示在中心点
方位名次	top/bottom/left/right/top left/......
具体数值或百分比	0 0 / 10% 10%/......

实例：

background: radial-gradient(circle farthest-side at 0 red,yellow);

ico 制作工具：

在线工具 http://www.ico51.cn/
在线工具 http://www.bitbug.net/