必威体育Betway必威体育官网
当前位置:首页 > 网站建设

css sprite生成工具使用教程

时间:2018-02-18 06:00:00来源:网站建设作者:seo实验室小编阅读:92次「手机版」
 

sprite

css精灵 CSSSprite 网站加载速度 csssprite在线工具

什么是css sprite

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

为什么要用这个工具

1.加快网页加载速度

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

2.后期维护简单

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

3.开源

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

如何使用

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

css精灵 CSSSprite 网站加载速度 csssprite在线工具

2.打开CssSprite.exe

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

css精灵 CSSSprite 网站加载速度 csssprite在线工具

3.打开图片

点击左上角按钮打开图片

css精灵 CSSSprite 网站加载速度 csssprite在线工具

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

4.排布图片

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

5.代码生成

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

6.保存雪碧图

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

相关阅读

Photoshop CS6版本安装及破解教程

Photoshop所有版本中,最经典的版本就是CS6了,本教程着重讲解Photoshop CS6版本安装及破解详细步骤,并给出Photoshop CS6,如需要可在下

黑客十大常用工具介绍

黑客技术一度被认为是一个神秘的特有领域,随着技术的进步和领域环境的进步,它已经成为一种非常普遍的现象。黑客技术可以用于有害目

【OpenGL】OpenGL教程(1)——准备

原文:http://www.cnblogs.com/collectionne/p/6617364.html GLFW OpenGL是一个图形库,而要画图,就需要先创建一个窗口。不幸的是,Open

把excel2010绘图工具调出来的教程

在Excel中经常会使用到绘图工具,但可能有些时候手滑点错了,把绘图工具点没了,下面是seo实验室小编带来的关于把excel 2010绘图工具调

代理服务器的常用使用方法介绍(图文教程)

大多费尔公用模块都需要连接互联网,但有时可能因为网络问题而无法正常连接,这时可以尝试使用代理服务器。但首先您必需知道代理服务

分享到:

栏目导航

推荐阅读

热门阅读