diff --git a/README.md b/README.md
index 3d946bb..5c6a6b1 100644
--- a/README.md
+++ b/README.md
@@ -68,7 +68,7 @@ It's very easy to adapt Retina screen. You just need to use double size images a
 sprite-loader will collect all the background and background-image attributes in css files to combine. Except for following circumstance:
 
 1. Images that set the background-position and background-size.
-	
+
 	```
 	/* ignore images that set background-position */
 	.bg1{background: url(1.png) no-repeat -10px -10px;}
@@ -76,11 +76,28 @@ sprite-loader will collect all the background and background-image attributes in
 	.bg2{background: url(2.png); background-size: 10px 10px;}
 	```
 2. Image url that contain #spriteignore string.
-	
+
 	```
 	/* ignore all images that contain #spriteignore */
 	.bg3{background: url(3.png#spriteignore);}
 	```
-	
+### 4.Set the output path of the sprite
+You can set the output path of the sprite through configure the `outputPath` option, which can be an absolute path with `output.path` as the root or a relative path relative to the `output.path`.
+
+The path setted will be transformed to an absolute path with `output.path` as the root, and the `output.publicPath` will be prepended when set the background image url in CSS.
+
+```javascript
+const spriteLoader = {
+  loader: 'sprite-loader',
+  options: {
+    outputPath: '/static/imgs/sprites/'
+  }
+}
+```
+
+Why transform the path to an absolute path with `output.path` as the root?
+
+Because sprite is one kind of image resource, it should be inside the image directory when deployed.
+
 ## Licence
 MIT
diff --git a/README_ZH.md b/README_ZH.md
index 96f482a..736e554 100644
--- a/README_ZH.md
+++ b/README_ZH.md
@@ -65,7 +65,7 @@ Retina屏适配非常简单，你只需将图片存为2倍大小，且命名为x
 sprite-loader会收集样式文件中所有的background,background-image属性的图片进行合并，但以下几种情况除外。
 
 1. 设置了background-position，background-size的图片。
-	
+
 	```
 	/* 忽略有background-position的图片 */
 	.bg1{background: url(1.png) no-repeat -10px -10px;}
@@ -73,11 +73,29 @@ sprite-loader会收集样式文件中所有的background,background-image属性
 	.bg2{background: url(2.png); background-size: 10px 10px;}
 	```
 2. url带#spriteignore参数的图片。
-	
+
 	```
 	/* 忽略有#spriteignore的图片 */
 	.bg3{background: url(3.png#spriteignore);}
 	```
-	
+
+### 4.设置精灵图的输出路径
+通过设置`outputPath`选项设置精灵图的输出路径。该选项可以是以`output.path`为根目录的绝对路径或者相对于`output.path`的相对路径。
+
+设置的路径在内部会被转化为以`output.path`为根目录的绝对路径，同时在CSS中设置背景图的路径时，`output.publicPath`会被添加在路径的前面。
+
+```javascript
+const spriteLoader = {
+  loader: 'sprite-loader',
+  options: {
+    outputPath: '/static/imgs/sprites/'
+  }
+}
+```
+
+为什么`outputPath`最终被解析为以`output.path`为根目录的绝对路径？
+
+因为精灵图作为一种图片资源，部署时应该和其他图片位于同一个目录。
+
 ## 协议
-MIT
\ No newline at end of file
+MIT
diff --git a/lib/loader.js b/lib/loader.js
index 6937704..061a638 100644
--- a/lib/loader.js
+++ b/lib/loader.js
@@ -107,16 +107,19 @@ function createSpriteImage(images, repeatType, query) {
 }
 
 function emitSprite(name, buffer) {
-    let options = (loaderUtils.getOptions ? loaderUtils.getOptions(this) : loaderUtils.parseQuery(this.query)) || {};
-    let outputPath = options.outputPath || '';
-    let cssImagePath = options.cssImagePath || this._compiler.options.output.publicPath;
-    let nameTpl = name || '[hash].png';
+  const options = (loaderUtils.getOptions ? loaderUtils.getOptions(this) : loaderUtils.parseQuery(this.query)) || {};
+  const outputPath = options.outputPath || '';
+  const projectkOutputOptions = this._compiler.options.output;
+  const projectPublicPath = projectkOutputOptions.publicPath;
+  const nameTpl = name || '[hash].png';
+  const url = loaderUtils.interpolateName(this, nameTpl, {content: buffer});
+  const normalizedOutputPath = outputPath.replace(/^\.?\/?/, '');
+  const theSpriteFilePath = `${normalizedOutputPath}/${url}`.replace(/\/\//g, '/');
+  const theImageUrlInCSS = (projectPublicPath + normalizedOutputPath + url).replace(/\/\//g, '/');
 
-    let url = loaderUtils.interpolateName(this, nameTpl, {content: buffer});
-    this.emitFile(outputPath+url, buffer);
+  this.emitFile(theSpriteFilePath, buffer);
 
-    //return this._compiler.options.output.publicPath + url;
-    return cssImagePath+url;
+  return theImageUrlInCSS;
 }
 
 function toPx(num) {
@@ -261,4 +264,4 @@ module.exports.loader = function (content) {
     })
         .then(cssText => callback(null, cssText))
         .catch(e => callback(e));
-};
\ No newline at end of file
+};