css图片横向压缩,【css样式生成 & 图片合并压缩工具】Sprite，你值得拥有

好久好久没有更新博客了，越来越懒。。。话说懒也有懒的好处，懒的时候你可能会想着用些神马方法来帮你偷懒。没错，下面就给大家介绍个博主前不久开发的【css样式生成 & 图片合并压缩工具】Spirte。

功能简介：

1. 自动合并选定文件夹下所有png图片为一张大图并压缩(水平和垂直两个方向)

2. 智能生成css样式和测试文件(命名规则来，hover和click有惊喜哦)

点击Go会自动生成sprite.html(css样式)和sprite.png(合并后的图片)，如果勾选了压缩还有有个sprite_uncompressed.png未压缩文件对比。

软件截图：

什么是Css Sprite(来自百度百科)？

CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会 像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需 顾忌这个问题。

按照yahoo的rules for high performance web sites的原则，应当较少Client与Server端间 的HTTP Request次数。通过CSS Sprites方法将多张图片组装成单独的一张图片，可以有效减少HTTP请求 的次数。

当整幅图片载入完成后，你就可以使用CSS方法通过设置背景位置的方式完成所需图片的准确调用。

加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。

为什么博主要写Sprite工具？

我们来一个很常见的工作流：

1. 设计师把单个图片切好；

2. 手动用PS把这些图片合成一张大图；

3. Web前端攻城狮苦逼的拿着这张图一个个的写background-position来定位单个小图；

第2,3步这苦逼的步骤。。。费时费力，自身又得不到任何提高，我们只想送她两个字：呵呵。。。

用Sprite工具，让我们看下会有什么变化

1. 设计师把单个图片切好；

2. 任何人打开Sprite工具，选择要合并图片文件夹，点击“Go”，即可完成图片合并和css样式生成工作；

wow，步骤由3步变2步，更神奇的是第2步是如此的简单，惬意，轻轻一点，万事ok。

怎么使用Sprite工具？

咦，前面不是说只要选定图片所在文件夹一点就可以生成了吗？搞个使用说明是几个意思？各位看官稍安勿躁，确实按上述方法是可以做到这些，但咱这个工具还具备了根据图片名智能生成css的作用。打个比方图片名为btn_hover.png在生成css时会自动解析成btn:hover。没错，以下是具体规则实例：

wechat => .wechat

wechat_hover => .wechat:hover

wechat-hover => .wechat:hover

wechat_ibg_hover => .wechat_ibg:hover

wechat-ibg-hover => .wechat-ibg:hover

wechat.ibg => .wechat .ibg

wechat.ibg.wechat_focus => .wechat .ibg .wechat:focus

wechat.ibg.wechat_none => .wechat .ibg . wechat_none

wechat_hover.wechat_none => .wechat:hover .wechat_none

wechat-hover.wechat-none => .wechat:hover .wechat-none

是不是大概看懂了，我再详细解释下：

1. 生成的css类名已图片名为准；

2. 符号“."是分隔符，会生成多个类；

3. 符号”_"和“-”后如果是css伪类关键字(:link, :visited, :hover, :active, :focus, :before, :after, :lang)将自动生成css伪类

e.g. wechat-hover => .wechat:hover

运行环境：

WIN32， .net framework 2.0

下载：

其他：

有人可能会说，为啥不用sass和compass，人家也有sprite功能啊？确实，他那功能确实很牛叉，但还是稍有学习成本，而像css预编译工具这种在团队开发时对来的利弊业界褒贬不一。而Sprite工具理念就是简单，易用，不需要学习，谁都能用。

希望这个工具能够给大家带来方便，提高工作效率。在使用过程中如有任何建议和意见请联系博主，谢谢。

webpack(四) --css样式及图片打包

一.CSS样式打包 1. loader简介 由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是j ...

IIS发布，无法显示CSS样式和图片

描述: 最近给同事安装web程序时,把IIS安装好后,发布网站时,图片和css样式不显示. 程序没问题,发布也没问题. 后来网上一查,出错的原因可能是IIS的配置问题. 果然,按照网上的方法,顺利显示 ...

vs中正常IIS发布网站后css样式、图片丢失jQuery报错 $ is not defined

问题描述: VS运行能够正常看到样式和图片 ,IIS发布后样式丢失.图片不显示.并且jQuery报错“$ is not defined”. 问题分析: 1.首先怀疑是样式文件.图片等发布的时候没有发布 ...

Bootstrap--全局css样式之图片

好久没有更新博客了,在这里跟大家分享一下生活的小乐趣,作为程序员,整天对着电脑是很不爽的,加班也是常有的,所以连续工作对身体是很不爽的,而且随着年龄的增加,程序员身体状况会越来越差,还是建议大家要常去 ...

css样式hover图片闪烁问题

主要是ie8及ie8以下版本浏览器会出现此问题, 问题核心是因为hover选择器没有缓存即将要替换的图片, 所以导致替换期间有一个极其短暂的空白期. 解决方案: 采用 background-posit ...

图标字体库(用CSS样式生成搜索、购物车等图标)

参考网址:http://fontawesome.dashgame.com/ 基本图标: 您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称. Font ...

css样式背景图片设置缩放

一.背景颜色图片平铺 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 默认是平铺 background-pos ...

css样式设置图片半透明度，兼容IE8，火狐

关于背景颜色透明的兼容浏览器的问题,一直是个问题,我所写的兼容IE8,和火狐,说是兼容所有浏览器我就没有测试,有兴趣的朋友可以自己测试下吧. background-color:white;filter ...

css 样式 设置图片成为圆形

随机推荐

url下载网页的三种方法

# -*- coding: utf-8 -*- import cookielib import urllib2 url = "http://www.baidu.com" print ...

Freezable 对象(WPF)

# Freezable 对象(WPF) # > Freezable 继承自 DependencyObject,同时添加了 Freezable 方法,用于冻结对象. --- ## 冻结对象 ## ...

UIView的frame和bounds区别

UIView的frame和bounds区别 iOS中,大家肯定对view和frame都不陌生,我们设置view在父view中的位置和大小时,只需要设置frame就可以了. 可能大家也有查过网上的一些资 ...

Java-----Excel转HTML

尽管是转别人的(忘了哪转过来的了),但此处标为原创不是为了提高訪问量,也不是为了其它.仅仅是纯粹的认为有实际用途.希望能给很多其它有此需求的人看到并能帮到他们就足够了 所需jar包:jxl.jar p ...

HDU 4763 Theme Section

题目: It's time for music! A lot of popular musicians are invited to join us in the music festival. Ea ...

BZOJ1503 [NOI2004]郁闷的出纳员 splay

原文链接http://www.cnblogs.com/zhouzhendong/p/8086240.html 题目传送门 - BZOJ1503 题意概括 如果某一个员工的工资低于了min,那么,他会立 ...

java 多线程简单例子

实现线程的方式是一,继承Thread类,重写父类的run()方法 二,实现接口Runnable中的run()方法. 下面是简单的例子 例子1:银行存取钱问题 package com.direct.de ...

python 切片知识大全

切片 无论是在工作中,还是面试的过程性,总会有那么几个关于对某一个集合进行切片,得到我们想要的部分.可见这部分虽然简单但还是很重要的,正确运用可以使你更有效的解决一些复杂的问题.下面我们就正式进行有关 ...

百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html