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
css图片横向压缩,【css样式生成 图片合并压缩工具】Sprite,你值得拥有相关推荐
- 前端笔记-webpack加载前端资源(图片,css等)
目录 基本概念 代码与实例 基本概念 通过在webpack.config.js这个文件中添加module rules进行如下代码: 这里分别是加载vue,以及css,和styl样式和图片 styl用于 ...
- 【web前端】CSS高级技巧(精灵图,字体图标,CSS三角,CSS用户界面样式,文字与图片垂直对齐,溢出的文字省略号显示,常见布局技巧,CSS初始化)
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
- html背景图片横屏,CSS背景颜色 背景图片 居中 重复 固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...
- img 错误样式css,css设置图片大小_css 控制img图片的大小样式
摘要 腾兴网为您分享:css 控制img图片的大小样式,掌上财富,优品多多,问作业,淘客联盟等软件知识,以及手机游戏开挂神器,au补丁,局域网监测,苹果录屏专家,重复文件删除,易通教育,章鱼输入法,爱 ...
- 通过CSS样式缩放图片导致图片模糊的解决方案
在进行前端页面开发的过程中,通过使用CSS对图片进行等比例缩放,存在会使图片失真的情形.这种情况有点违反我们的通常认知,毕竟放大图片会使图片失真这很正常,但是缩小图片通常应该会使图片变清晰才对.目前我 ...
- 解决“图片因为CSS样式缩放导致变糊问题”
前言 对于图片的放大缩小,我们都会自然而然的认为:图片放大,会变得模糊,图片变小会变得较为清晰.放大,会把瑕疵更明显的暴露出来:缩小,可以让瑕疵难以发觉.这是生活中的自然现象.但是,这个现象放到网页上 ...
- Bootstrap全局css样式_图片,响应式工具
响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.<!DOCTYPE html> <html lang=& ...
- php 生成纯黑白图片,使用CSS将彩色图片转换为黑白图片
通过使用过滤器我们能够不使用photoshop等图像软件或js.php等技术就可以进行各种图像处理.现在,CSS过滤器已经被各种现代浏览器广泛支持,我们可以使用一些组合的方法,来制作跨浏览器的图像处理 ...
- css:css样式背景图片设置透明度,css如何设置背景图片的透明度
1. 了解css如何设置背景图片的透明度 注意: css中无法直接给背景图片加 opacity 属性,可以使用下面的方法来给background-image加上我们想要的透明度opacity. 2. ...
最新文章
- 旷视提出AutoML新方法,在ImageNet取得新突破 | 技术头条
- 自学python推荐书籍 知乎-你一定不能错过的翻译学习资源!
- ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇
- 大战C100K之-Linux内核调优篇--转载
- Boost:使用boost :: hash和boost :: array的测试
- 插入排序和冒泡排序算法JAVA实现
- tablayout支持改变选中文字大小,支持左右滑动,支持viewpager,支持三角可移动指示器...
- Mockito—参数匹配~任意
- Oracle客户端安装以及PL/SQL Developer安装方法
- VMware Workstation 与 Device/Credential Guard 不兼容。在禁用 Device/Credenti--------------------------解决办法
- leetcode - 4. Median of Two Sorted Arrays
- HashSet模拟新浪微博用户注册
- android(6.0,11.0)开启wifi热点
- 微信加好友方法有哪些?
- 计算机选择u盘启动不了,win10系统u盘启动不了系统怎么办_win10无法进入u盘启动解决方法...
- 一名准菜鸟程序员(bushi)的自我介绍
- ES6中Map与对象、数组,JSON之间的相互转换
- UT-890J ( USB -2- RS422/485 Cable )
- 【考研高数-高等数学-基础】第六章 定积分的应用
- 海康网络摄像头二次开发