fex-team / fis

Front-end Integrated Solution - 前端集成解决方案, 最新版请进入 FIS3 https://github.com/fex-team/fis3
http://fis.baidu.com
MIT License
2.96k stars 654 forks source link

fis-spriter-csssprites的scale问题 #506

Open changexbc opened 9 years ago

changexbc commented 9 years ago

使用 fis-spriter-cssspritesv0.3.0

fis.config.set('settings.spriter.csssprites',{
     scale: 0.5
});
.a1{
    background: url(icons/icon_01.gif?__sprite) no-repeat 0px 0px;
    width:32px;
    height:32px;
}.a2{
    background: url(icons/icon_02.gif?__sprite) no-repeat 0px 0px;
    width:32px;
    height:32px;
}.a3{
    background: url(icons/icon_03.gif?__sprite) repeat-y 0px 0px;
    width:320px;
    height:320px;
}.a4{
    background: url(icons/icon_04.png?__sprite) repeat-y 0px 0px;
    width:320px;
    height:320px;
}.a5{
    background: url(icons/icon_05.png?__sprite) repeat-x 0px 0px;
    width:320px;
    height:320px;
}.a6{
    background: url(icons/icon_06.png?__sprite) repeat-x 0px 0px;
    width:320px;
    height:320px;
}

image

设置repeat-x和repeat-y的背景图片生成sprite之后并没有自动设置background-size,还是原来的大小

oxUnd commented 9 years ago

x x方向平铺,y y方向平铺,这个有啥问题吗

changexbc commented 9 years ago

@xiangshouding 平铺是没有问题的,但是设置repeat-x和repeat-y的背景图片生成sprite之后并没有自动设置background-size

oxUnd commented 9 years ago

https://github.com/fex-team/fis-spriter-csssprites/blob/master/libs/image.js#L80 我给忘了当初为啥没支持了...

changexbc commented 9 years ago

@xiangshouding 。。。好吧,那你们移动端碰到背景repeat的图片需要合并sprite的是如何解决的?

fouber commented 9 years ago

@changexbc

csssprites并不解决100%的问题,为了在配置简化和功能强大二者之间取平衡,fis的csssprites被设计为只解决60%~70%的合并问题,剩下的就放弃合并或者手动合并吧

changexbc commented 9 years ago

好吧,repeat图片手动合并成本太大,现在也只能暂时放弃repeat图片的合并了,如果能支持repeat就完美了。。非常感谢两位的回答。

fouber commented 9 years ago

@changexbc

支持repeat的,就是repeat组合background-size会有问题,但如果你自己手动写background-size应该可以啊

changexbc commented 9 years ago

@fouber 只要开启fis-spriter-csssprites,如果设置scale,手写background-size之后构建出来的css文件中会去掉background-size。如果没有设置scale,手写background-size之后构建出来的css文件中还是会去掉background-size,而且连background-image都没有了。所以现在在移动端只能放弃repeat图片的合并了

oxUnd commented 9 years ago

嗯,确实是这样的;