前端进阶html+css02----精灵图的使用（雪碧图）

weixin_43795761

已于 2023-08-08 23:11:45 修改

阅读量501

点赞数 1

分类专栏： html 文章标签：前端 javascript css

于 2023-02-13 22:49:58 首次发布

本文链接：https://blog.csdn.net/weixin_43795761/article/details/129018501

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

精灵图（css sprites）也叫雪碧图，就是把许多图片制作成一图片。常用来存放图标。通过设置位置来显示你需要的图片。下图是一个例图。
在这里插入图片描述

优点：减少获取资源的次数，提高了速度。

这里介绍一个获取精灵图位置的工具：

http://www.spritecow.com/

1.点击open image
在这里插入图片描述
2.点击select Sprite,点击你需要的图标，复制下面自动生成的代码即可。

在这里插入图片描述

例：
<style>
  .icon1{
	background: url('./assets/jingLing.png') no-repeat -192px 0;
	width: 26px;
	height: 13px;
	/*记得加inline-block, 否则无法设置宽高
	（i元素是display:inline;无法设置宽高）*/
    display: inline-block;
  }
</style>
<body>
  <div class="box">
    <i class="icon1"></i>
  </div>
</body>