css sprite简单快速的教程。

我不是女神ヾ 2022-09-29 01:31 141阅读 0赞

**什么是css sprite**

CSS sprite在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

**为什么要用这个工具？**

**1.加快网页加载速度**

浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染。

**2.后期维护简单**

该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，直接生成代码，简单易用。

**3.开源**

该程序已经在github上开源，地址：https://github.com/iwangx/sprite

**如何使用**

1.用ps或者dw把需要的图片切下来

![css精灵 CSSSprite 网站加载速度 csssprite在线工具][css_ CSSSprite _ csssprite]

**2.打开CssSprite.exe**

打开CssSprite.exe文件，下载地址我会放在下面一点

![css精灵 CSSSprite 网站加载速度 csssprite在线工具][css_ CSSSprite _ csssprite 1]

**3.打开图片**

点击左上角按钮打开图片

![css精灵 CSSSprite 网站加载速度 csssprite在线工具][css_ CSSSprite _ csssprite 2]

选择多张图片，点击打开按钮

**4.排布图片**

可以选择上面的最上面按钮今天横竖的默认排布，也可以鼠标选中图片拖动位置，拖动完成后程序会根据内部图片的位置生成面积最小的雪碧图，当然也会改变相应的图片位置

**5.代码生成**

在程序中可以生成sass代码，以及css代码，看自己需要嘛，自己选择，选中“是否是手机端”的时候会把所有的尺寸除以2，因为手机端往往会设计图比较大，所以要缩放，建议生成图片后再复制生成的代码

**6.保存雪碧图**

点击“生成雪碧图”按钮，程序会默认选中你在第3步的时候打开图片的地址，然后点击确定后生成雪碧图。

[css_ CSSSprite _ csssprite]: http://upload.chinaz.com/2015/0430/1430362287685.png
[css_ CSSSprite _ csssprite 1]: http://upload.chinaz.com/2015/0430/1430362287578.png
[css_ CSSSprite _ csssprite 2]: http://upload.chinaz.com/2015/0430/1430362287141.png

发表评论取消回复

表情：

评论列表（有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读

相关 html中sprite标签,网页切图 CSS Sprites（CSS精灵）介绍和图文使用教程

CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵、CSS雪碧的家伙到底解决了什么问题，我们又怎样合理使用这个技术呢？下面

心已赠人/ 2022年10月11日 15:58/ 0 赞/ 48 阅读

相关 css sprite简单快速的教程。

什么是css sprite CSS sprite在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当

我不是女神ヾ/ 2022年09月29日 01:31/ 0 赞/ 142 阅读

相关 css sprite

CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会

短命女/ 2022年09月25日 10:29/ 0 赞/ 172 阅读

相关 css之sprite（图片精灵）

用CSS Sprites能很好地减少网页的http请求，允许你将一个[页面][Link 1]涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会

旧城等待，/ 2022年09月05日 00:08/ 0 赞/ 263 阅读

相关 Sprite Kit教程：初学者

Sprite Kit教程：初学者发布于：2013-09-30 09:40阅读数：14791 在iOS 7中内置了一个新的Sprite Kit框架，该框架主要用来开发2

超、凢脫俗/ 2022年08月10日 12:52/ 0 赞/ 208 阅读

相关 CSS Sprite、CSS雪碧图应用实例

CSS Sprites技术被国内一些人称为CSS雪碧图，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“backgrou

向右看齐/ 2022年07月28日 11:58/ 0 赞/ 229 阅读

相关 CSS sprites

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- rep

超、凢脫俗/ 2022年07月15日 08:42/ 0 赞/ 170 阅读

相关 CSS Sprites精灵图的使用

CSS Sprite是什么？ CSS Sprite直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”或“CSS贴图定位”，是一种网页图片应用处理方式。其实就是把多张

亦凉/ 2022年05月17日 07:05/ 0 赞/ 220 阅读

相关 CSS Sprite的应用

什么是CSS Sprite ？不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON，栏目背景啊，图片

亦凉/ 2021年12月01日 22:44/ 0 赞/ 206 阅读

相关 css sprite 雪碧图

特点： 1.静态图片，不随用户信息的变化而变化 2.小图片，图片容量比较小 3.加载量比较大一些大图不建议拼接成雪碧图有效的减少http请求，加速内容的显示我

拼搏现实的明天。/ 2021年09月16日 10:04/ 0 赞/ 304 阅读