laoshu133 / grunt-css-sprite

A grunt plugin to help front engineer creating css sprite.
MIT License
65 stars 29 forks source link

url用绝对路径的写法无法比配 #21

Closed niuben closed 10 years ago

niuben commented 10 years ago

你好,用了一下这个工具觉得特别好。不过有一个小问题需呀请教你一下。 background-image 如果用绝对路径写法,就无法匹配上。(下面附有css代码) 这个工具是不是只能用相对路径,比如(../image)。 文档中有一个imagepath_map属性,我不知道怎么去用。 麻烦你了。

btn {
background-image: url(/model/red/images/btn.png); } .btn-orgen { background-image: url(/model/red/images/btn-orgen.png); } .btn-yellow { background-image: url(/model/red/images/btn-yellow.png); }

laoshu133 commented 10 years ago

必须要以相对路径才能正确计算出背景图片的真实位置; imagepath_map 支持函数,参数为url()内的路径,返回值用于作为真实路径匹配, 例如:

options: {
    imagepath_map: function(imgUrl) {
        var urlPrefix = '/model/red/images/';
        var relativePath = '../../images/';

        return imgUrl.replace(urlPrefix, relativePath);
    }
}