前端必备 CSS Sprites雪碧图生成工具

2017-3-4 17:50 来自本站原创 41,650 9 27
[摘要]

CSS Sprites又称css精灵或者谐音css雪碧,是一种网页图片应用处理方式,今天为大家分享一个一键生成css雪碧图片的工具,复杂的事情简单化,提高开发效率。

CSS Sprites又称css精灵或者谐音css雪碧,是一种网页图片应用处理方式。将一个页面内所需要显示的图片全部整合到一张大图中,并使用css属性background进行调用。这样的话,当页面渲染时,可以减少请求次数,在一定程度上能够加快网页加载速度。

这并不是什么新鲜玩意了,但由于将小图整合到一张大图,又要准确的写出所需小图的background-position值,对于很多新手来说比较浪费时间,很多人只能放弃这个比较繁琐的步骤。

今天为大家分享一个一键生成css雪碧图片的工具,复杂的事情简单化,提高开发效率。

软件下载地址:

点我下载    提取密码  hu90

使用方法:

该软件使用方法非常简单,请先下载压缩包,解压出来。

1、打开软件,将会看到下图界面,整个界面比较简洁,各功能区一目了然,我们需要做的是点击左上角的“选择多幅小背景图片”

前端必备 CSS Sprites雪碧图生成工具

2、勾选所需要整合的小图后,载入,可选择“小图竖排”或“小图横排”进行排序,也可手动挪动图标进行布局。

前端必备 CSS Sprites雪碧图生成工具

3、填写中间部分的选项。css中文件夹路径是大图将要存放的位置,相对于css样式表的路径,请按照实际情况进行填写;图片名称自定义。

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

5、点击“生成雪碧图”就可以保存大图了

CSS Sprites好处很明显,在页面性能优化上特别出众,使用这个工具更可以准确的获取每个小图的background-position值,是一个前端布局必备的好工具。

本文最后更新于2017年3月4日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:9   其中:访客  0   博主  0
    加载中...
    1. 小凡 1
      6年前 (2018-07-09) 0楼

      有Mac版的吗?

      • Wing
        6年前 (2018-07-09)  地下1层

        @小凡: 该软件没有Mac版的,可以找找Macos下有没有类似的软件,不行就直接Photoshop

    2. 7年前 (2017-03-06) 0楼

      这个不错,很方便。。

    3. 7年前 (2017-03-06) 0楼

      原来大图上的小图是这么来的,我经常在一些网站上看到,背景是一张大图,上面有很多小图标,然后通过CSS代码分别引用某个小图片。这样一来整个站点就一张图片搞定。非常不错。

    4. 7年前 (2017-03-06) 0楼

      这个软件好呀 可以把网页迅速反应过来,对于网络不好的 确实有帮助

    5. 7年前 (2017-03-05) 0楼

      没有看懂!那是不是可以对每个小图进行单独的链接配置呢?

      • Wing
        7年前 (2017-03-06)  地下1层

        @明月登楼: 所谓css sprites,就是将页面所调用的小图集合到一个大的图片里,然后在调用小图片的时候,使用background:url(xxx) norepeat;background-position:x x;来进行css调取。显示某个小图,只需要知道它的background-position即可调用,要知道一个复杂的页面上,修饰小图的数量是很大的,减少图片请求数量,有利于提高加载速度。

    6. 7年前 (2017-03-05) 0楼

      学习到了

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 9 27 41,650
    Top