精灵图和字体图标

Posted 2021-10-19 IC-ic.ic

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了精灵图和字体图标相关的知识，希望对你有一定的参考价值。

文章目录

一、精灵图
二、字体图标
- 1.常用的字体图表网站
- 2.如何引入
总结

一、精灵图

1.什么是精灵图？

精灵图是一种网页图片的应用技术。主要针对背景图片使用，把多个小背景图片合成一个大的图片

2.为什么要用精灵图

（1）减少服务器的访问量，加快加载速度

（2）方便管理这些背景图图片

3.如何使用

1.用Macromedia Fireworks软件加载
2.用切片工具查看所需要图标的x和y轴的位置
3.使用background-position写上x和y坐标
注：一般情况下往左和往上是负值

4.演示

例：提取图片中的x字母

代码如图：

  <style>
        span {
            display: inline-block;
        }
        
        .x {
            width: 109px;
            height: 121px;
            background: url(abcd.jpg) -254px -548px;
        }
    </style>
</head>

<body>
    <span class="x"></span>
</body>