CSS雪碧图(sprite)的使用及制作方法教程

css雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。 1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件：合成雪碧图后是这...

css雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。

1.先看一下雪碧图

没有使用雪碧图时图标是这样一个个的单独文件：

合成雪碧图后是这样拼在一起的一张图：

2.雪碧图的使用

首先确定要使用的图标的位置和大小（可以通过ps测量），

如下的雪碧图大小统一，排列规则

它们的大小均为30px*30px，第一个图标位置为0 0，第二个的位置为30px 0，依次...

样式可以这样写：

  .box1 li:nth-child(1) {
    width: 30px;
    height: 30px;
    background: url(./images/map-icon.png) no-repeat 0 0; /* 第一个图标*/
  }
  
  .box1 li:nth-child(2) {
    width: 30px;
    height: 30px;
   background: url(./images/map-icon.png) no-repeat -30px 0; /* 第二个图标*/
 }
 
 .box1 li:nth-child(3) {
   width: 30px;
   height: 30px;
   background: url(./images/map-icon.png) no-repeat -60px 0; /* 第三个图标*/
 }

排列不规则的雪碧图测量计算就不太方便了，推荐一个在线雪碧图样式工具http://tools.jb51.net/code/css_sprite

3.合成雪碧图

如果没有美工MM给我们做图，自己找来的很多零碎图标(.png)可以使用CssSprite工具进行合成。

使用较为简单，选择图片后，可以竖排或横排，也能手动调整位置；设置css中路径名及保存名称，生成雪碧图即可，可以同时生成对应的css代码。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-05-20 11:15
阅读 ( 516 )
分类：WEB前端开发

CSS雪碧图(sprite)的使用及制作方法教程

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »