fixes #24 / adds options to set bakground color and opacity of sprite

bin/cli.js

@@ -64,10 +64,18 @@ var opts = require('nomnom')
     flag: true,
     help: 'continuously create sprite'
   })
+  .option('background', {
+    default: '#FFFFFF',
+    help: 'background color of the sprite in hex'
+  })
   .option('margin', {
     default: 5,
     help: 'margin in px between tiles'
   })
+  .option('opacity', {
+    default: 0,
+    help: 'background opacity of the sprite. defaults to 0 when png or 100 when jpg'
+  })
   .option('orientation', {
     choices: ['vertical', 'horizontal', 'binary-tree'],
     default: 'vertical',

index.js

@@ -31,7 +31,9 @@ var defaults = {
   template: null,
   orientation: 'vertical',
   retina: false,
-  margin: 5
+  background: '#FFFFFF',
+  margin: 5,
+  opacity: 0,
 };
 
 module.exports = {

lib/css-sprite.js

@@ -10,6 +10,7 @@ var imageinfo = require('imageinfo');
 var layout = require('layout');
 var replaceExtension = require('./replace-extension');
 var lwip = require('lwip');
+var Color = require('color');
 
 // json2css template
 json2css.addTemplate('sprite', require(path.join(__dirname, 'templates/sprite.js')));
@@ -20,6 +21,14 @@ module.exports = function (opt) {
   var layoutOrientation = opt.orientation === 'vertical' ? 'top-down' : opt.orientation === 'horizontal' ? 'left-right' : 'binary-tree';
   var layer = layout(layoutOrientation);
 
+  if (opt.opacity === 0 && opt.format === 'jpg') {
+    opt.opacity = 1;
+  }
+
+  var color = new Color(opt.background);
+  opt.color = color.rgbArray();
+  opt.color.push(opt.opacity);
+
   function queue (file, img) {
     var spriteName = replaceExtension(file.relative, '').replace(/\/|\\|\ /g, '-');
     layer.addItem({
@@ -56,7 +65,7 @@ module.exports = function (opt) {
   }
 
   function createCanvas (layerInfo, cb) {
-    lwip.create(layerInfo.width, layerInfo.height, 'white', function (err, image) {
+    lwip.create(layerInfo.width, layerInfo.height, opt.color, function (err, image) {
       async.eachSeries(layerInfo.items, function (sprite, callback) {
         image.paste(sprite.x + opt.margin, sprite.y + opt.margin, sprite.meta.img, callback);
       }, function () {

package.json

 {
   "name": "css-sprite",
-  "version": "0.9.0-beta",
+  "version": "0.9.0-beta2",
   "description": "css sprite generator",
   "license": "MIT",
   "repository": {
@@ -44,6 +44,7 @@
   ],
   "dependencies": {
     "async": "^0.9.0",
+    "color": "^0.7.1",
     "gaze": "^0.6.4",
     "graceful-fs": "^3.0.3",
     "imageinfo": "^1.0.4",

readme.md

@@ -40,13 +40,15 @@ Options:
    -b, --base64           create css with base64 encoded sprite (css file will be written to <out>)
    -c, --css-image-path   http path to images on the web server (relative to css path or absolute path)  [../images]
    -f, --format           output format of the sprite (png or jpg)  [png]
-   -n, --name             name of sprite file without file extension  [sprite]
+   -n, --name             name of sprite file without file extension   [sprite]
    -p, --processor        output format of the css. one of css, less, sass, scss or stylus  [css]
    -t, --template         output template file, overrides processor option
    -r, --retina           generate both retina and standard sprites. src images have to be in retina resolution
    -s, --style            file to write css to, if omitted no css is written
    -w, --watch            continuously create sprite
+   --background           background color of the sprite in hex  [#FFFFFF]
    --margin               margin in px between tiles  [5]
+   --opacity              background opacity of the sprite. defaults to 0 when png or 100 when jpg  [0]
    --orientation          orientation of the sprite image (vertical|horizontal|binary-tree)  [vertical]
    --prefix               prefix for the class name used in css (without .)
 ```
@@ -67,8 +69,10 @@ sprite.create(options, cb);
 * **processor:** output format of the css. one of css, less, sass, scss or stylus  [css]
 * **template:** output template file, overrides processor option
 * **retina:** generate both retina and standard sprites. src images have to be in retina resolution
+* **background** background color of the sprite in hex. Defaults to #FFFFFF
 * **style:** file to write css to, if omitted no css is written
 * **margin:** margin in px between tiles  [5]
+* **opacity** background opacity of the sprite between 0 and 100. Defaults to 0 when png or 100 when jpg
 * **orientation:** orientation of the sprite image (vertical|horizontal|binary-tree) [vertical]
 * **prefix:** prefix for the class name used in css (without .) [icon]
 

tasks/css_sprite.js

@@ -25,7 +25,9 @@ module.exports = function(grunt) {
       orientation: 'vertical',
       retina: false,
       margin: 5,
-      prefix: 'icon'
+      prefix: 'icon',
+      background: '#FFFFFF',
+      opacity: 0
     });
 
     var done = this.async();