一个小案例让你学会使用CSS精灵图

目录

 

1 精灵图的使用

2.精灵图使用案例

---

1 精灵图的使用

使用精灵图核心总结：

1. 精灵图主要针对于小的背景图片使用。

2. 主要借助于背景位置来实现

background-position 

3. 一般情况下精灵图都是负值。因为在精灵图中，坐标是从左上角出发，背景图往反方向移动,所以是负值。

（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

 

精灵图的本质是处理网页背景图像的一种技术，可以有效减少服务器接受和请求的次数，提高页面的加载速度。但是同样也不能把大量图片资源放在精灵图上，否则同样会导致加载精灵图速度变慢，而影响页面加载速度。

2.精灵图使用案例

接下来我们来使用精灵图拼自己的姓名，下面是素材

代码如下：

 //html结构
    <span class="f"></span>
    <span class="a"></span>
    <span class="n"></span>
    <span class="m"></span>
    <span class="i"></span>
    <span class="nn"></span>

//css样式
  span { display: inline-block; background: url(images/abcd.jpg) no-repeat; }
  .f{ width: 104px; height: 114px; background-position: 10px -140px;}
  .a{ width: 104px; height: 110px; background-position: -2px -10px;}
  .n{ width: 110px; height: 110px; background-position: -255px -270px;}
  .m{ width: 140px; height:110px;  background-position: -110px -270px;}
  .i{ width: 60px;  height: 108px; background-position: -327px -138px;}
  .nn{ width: 110px; height:110px;  background-position: -255px -270px;}

这是代码执行的效果：

很多小问题我们稍微一看就懂，这时候如果能动手敲一敲代码练习一下，这个知识点在我们的学习过程中，就从“懂”的状态 变成“会”的状态了。