java与python两个小人动图_CSS Sprite小图片自动合并工具(NodeJS,Python,Java,Ruby)
注* 基于Node.JS的图片合并工具还有一些,但大多依赖第三方图像处理库,此处略。
/*配置输出的大图片地址、排列方向,间隔等*/
/** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */
#web {
width: 17px; height: 17px;
background-repeat: no-repeat;
/*将web.gif添加到mysprite.png中, 只需要在后面添加 sprite-ref:sprite名 */
background-image: url(../img/web.gif); /** sprite-ref: mysprite; */
}
#logo {
width: 50px; height: 50px;
background-repeat: no-repeat;
background-position: top right;
background-image: url(../img/logo.png); /** sprite-ref: mysprite; sprite-alignment: right */
}
输出
#web {
width: 17px; height: 17px;
background-repeat: no-repeat;
background-image: url('../img/mysprite.png');
background-position: left -0px;
}
#logo {
width: 50px; height: 50px;
background-repeat: no-repeat;
background-position: top right;
background-image: url('../img/mysprite.png');
background-position: right -17px;
}
此工具其实是将注释的那行 background-image 替换成了 background-image/ background-position。 因此如果小图标也是一个小的CSS Sprites图标组合的话也是支持的,不过需要将background-position写在上面,以便能让生成的background-position将其覆盖,设置sprint-margin 指定偏移多少,与之前的background-position要对应:
.icon-security{
background-position: 4px 2px;
background-repeat: no-repeat;
/*注意 sprite-margin-left: sprite-margin-top 用来指定小图片的偏移 */
background-image: url("../images/16x16/Keygif.png"); /** sprite-ref: mysprite; sprite-margin-left: 4px; sprite-margin-top: 2px; */
}
SmartSprites的定制能力还是比较强的,输出不依赖文件名,美中不足的是注释的方式并不能在Sass, Compass, Less等扩展CSS标记语言中使用。
使用:直接调用此命令可直接生成合并好的CSS文件:tool/smartsprites/lib是你安装smartsprites时那些jar所存放的目录
java -Xms64m -Xmx256m -Djava.ext.dirs=tool/smartsprites/lib org.carrot2.labs.smartsprites.SmartSprites web/css/icons.css
若设置正确则会生成一个 mysprite-sprite.css 的文件。 SmartSprites的最好好处可能就是能与ant/maven的无缝集成了。
$icons: sprite-map("icons/*.png"); //其中有一个 icons/new.png 小图标
background: sprite($icons, new) no-repeat;
会被压缩成
background: url('/images/icons.png?12345678') 0 -24px no-repeat;
使用Compass需要引入Ruby且无法直接在原生CSS文件中使用。
还有 sprite-factory 等这个是托管在gem上面的
Python Glue
Glue是基于Python实现的一个CSS Sprites切图自动生成工具。它生成的CSS小图标所对应的样式名以目录名+文件名组织: 如.sprite-icons-zoom_out { }
项目主页 https://github.com/jorgebastida/glue
安装 http://glue.readthedocs.org/en/latest/installation.html
Linux
$ apt-get install libjpeg62 libjpeg62-dev zlib1g-dev python-dev
$ sudo pip install glue
使用:
$ glue icons sprites
icons,sprites都是文件夹,生成的目录结构如下:
sprites
├── icons.css
└── icons.png
生成的CSS代码如下
.sprite-icons-zoom_out{ background:url('sprites/icons/icons.png'); top:0; left:0; no-repeat;}
.sprite-icons-zoom_in{ background:url('sprites/icons/icons.png'); top:0; left:-16; no-repeat;}
.sprite-icons-zoom{ background:url('sprites/icons/icons.png'); top:-16; left:0; no-repeat;}
java与python两个小人动图_CSS Sprite小图片自动合并工具(NodeJS,Python,Java,Ruby)相关推荐
- python matplotlib绘制gif动图以及保存
python matplotlib绘制gif动图以及保存 标签: python matplotlib 谨以此文纪念我两天来的悲剧 昨天我用lstm拟合sin曲线,看到别人画的做的动图很好看,并且还能保 ...
- 初始python爬虫-爬取彼岸图单张到全部图片
初始python爬虫-爬取彼岸图单张到全部图片 1.单张图片爬取 2.一页图片 3.多页图片 彼岸图链接: https://pic.netbian.com/new/ 用到的库: import requ ...
- android 照片拼接长图_最智能的 Android 长图拼接应用:图片自动连接
点击「添加」图标,按拼接顺序勾选图片(免费版上限为 5 张),倘若不小心弄错了顺序,无需清除重新添加,可以通过按住图片拖动来进行排列.一切准备妥当之后,下一步就可以点击「连接!」来生成长图了. 生成的 ...
- js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
- python 加载动图_在浏览器中使用TensorFlow.js和Python构建机器学习模型(附代码)...
大数据文摘授权转载自数据派THU 作者:MOHD SANAD ZAKI RIZVI 本文主要介绍了: TensorFlow.js (deeplearn.js)使我们能够在浏览器中构建机器学习和深度学习 ...
- python制作数据增长动图_请问一下这种数据动图是如何做出来的?
用 Python 可以做这种数据动图,先上成果!如何用 Python 做数据动图https://www.zhihu.com/video/1075136852456951808 一般来说,这种视频都是用 ...
- 我用Python做了个动图生成器,把一千个MM生成了GIF设置桌面,只为每天愉悦心情
文章目录 序言 代码实战 序言 现在的年轻人都开始每天保温杯里泡枸杞,这怎么能行呢? 想要每天过的好,美女必然少不了,每天看美女,只为了愉悦心情,心情好了,才长寿. 于是怀揣着愉悦心情的想法,我开始制 ...
- python怎么存为动图_Python将视频或者动态图gif逐帧保存为图片的方法
本文是基于opencv将视频和动态图gif保存为图像帧.可以根据输入视频格式的不同,修改第21行. 对动图的处理不同于视频,PIL库包含对图像序列的基本支持.当打开gif图像时,自动加载第一帧.当图像 ...
- 有了这个方法群聊斗图你就不会输了(Python imageio制作gif动图)
原文链接:http://www.juzicode.com/python-funny-imageio-make-gif 先说需要用到的3个模块,imageio用来读写图像文件.imageio-ffmpe ...
最新文章
- Verdaccio介绍及安装 -- nodejs私有npm proxy registry代理
- python 树结构三方包_python第三方库---BeautifulSoup库(搬运)
- s71200模拟量输入输出_模拟用户输入并检查输出的简单方法
- 拼图项目的诅咒:为什么Java 9一遍又一遍地延迟?
- mysql string types ---- mysql 字符类型详解
- CodeVs——T 4919 线段树练习4
- 有问有答 | 你真的理解微服务架构吗?
- android开源tabview,TabBarView
- Centos7 安装Docker(v2021 version 20.10.5) 并通过docker-compose运行TiDB集群
- linux 硬盘响,完美解决Ubuntu Linux关机异响[SATA硬盘]
- java跑批任务_【spring配置】——spring整合Quartz定时器
- Scrapy分布式原理及Scrapy-Redis源码解析(待完善)
- Android开发之网络
- 最新区块链科普图书《区块链进化史》上市
- MIPS中的异常处理和系统调用
- 如何对工厂设备进行精准化管理?
- 爱了,这18个 Python 高效编程技巧真香
- double team
- 奥格斯堡大学计算机系,奥格斯堡大学
- 最近老是卖了就涨 买了就跌呢