什么是精灵图？为什么需要精灵图？

养意

已于 2024-03-12 15:57:57 修改

阅读量709

点赞数 19

文章标签： css 前端 html

于 2024-03-12 15:24:27 首次发布

本文链接：https://blog.csdn.net/weixin_55493330/article/details/136653120

版权

虽然学过但是也忘得差不多了吧，那我们今天来复习一下精灵图的作用

项目页面中会有很多的图片每次加载都要多次从服务器获取，效率慢，服务器负载大。

这时侯可以用到我们的精灵图拼成一张图这样服务器就之请求一次就把所有图片都下载下来了

精灵图Sprites

1.主要用于项目背景图等，把图片拼合成一张大的图片，这个图片就称为精灵图或者雪碧图

使用：background-position通过坐标定位显示图片

background-position:utl(图片地址) no-repeat -坐标x 坐标y;

可以用ps切片工具获取x,y

拓展：字体图标

1.下载

http://icomoon.io

阿里：http://www.iconfont.cn

进入网站后点击

单击选择需要的图标字体

点击F查看选择的图标

下载

2.引入

下载完成解压后打开文件夹把font文件复制粘贴到项目根目录（静态资源文件夹）

复制代码到style

 @font-face {
        font-family: 'icomoon';
        src: url('fonts/icomoon.eot?nebfeb');
        src: url('fonts/icomoon.eot?nebfeb#iefix') format('embedded-opentype'),
          url('fonts/icomoon.ttf?nebfeb') format('truetype'),
          url('fonts/icomoon.woff?nebfeb') format('woff'),
          url('fonts/icomoon.svg?nebfeb#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
      }

设置属性值就可以了

3.追加

点击import icons选择

选择新加的图标下载就可以了，下载完成后覆盖原来的文件就可以了

css三角

#sanjiao {
        width: 0;
        height: 0;
        line-height: 0;//兼容
        font-size: 0;//兼容
        border: 50px solid transparent;
        border-left-color: pink;
      }