02月10, 2012

AutoSprite:一款可以合并小图并自动修改CSS的CSS Sprites工具

简介

AutoSprite是一款将小图自动合并成大图片,并且可以自动修改对应CSS的css sprites工具。

相对之前的一些css sprites工具,具有以下的特点:

1、开发时在css直接写对应小图的url即可。如:background:url(小图片的地址)

2、后续如果有图片增删时,只用在对应的文件夹下增加或者删除对应的图片即可。

3、对于静态文件的缓存,开发时无需关心,工具自动进行。

使用方式

由于一个项目里可能会需要合并成多个css sprites, 所以需要知道将哪些小图片合并在一起,并且将这些小图片放在一个文件夹里。

<?php
$path = dirname(__FILE__);
 $file = '../src/AutoSprite/AutoSprite.class.php';
 function cssImgFilter($file){
 //return true;
 }
 require_once $file;
 $autoSprite = new AutoSprite();
 $autoSprite->imgPath = $path . '/img/';
 $autoSprite->outputImgFile = $path . '/output_img/a.png';
 $autoSprite->direction = 1;
 $autoSprite->margin = 10;
 $autoSprite->cssPath = $path . '/css/';
 $autoSprite->cssSavePath = $path . '/css_save/';
 $autoSprite->cssImgFilter = 'cssImgFilter';
 $autoSprite->cssReplaceImgPrefixPath = '../img/first/';
 $output = $autoSprite->generate();
?>

下载

可以从github上下载最新的代码。点击这里进入下载页面

本文链接:http://welefen.com/post/autosprite%e4%b8%80%e6%ac%be%e5%8f%af%e4%bb%a5%e5%90%88%e5%b9%b6%e5%b0%8f%e5%9b%be%e5%b9%b6%e8%87%aa%e5%8a%a8%e4%bf%ae%e6%94%b9css%e7%9a%84css-sprites%e5%b7%a5%e5%85%b7.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。