css精灵图切片如何让repeat-x无间隙？

Question

如代码所示,buildings是一个div,背景图片是精灵图的一个切片,我让它水平方向重复,原来的图片宽是1915px,然后我为了平铺设置为4000px,但是显示的效果是两张重复图片中间有空白间距.

.box .buildings{
    /*width: 1915px;*/
    width: 4000px;
    height: 520px;
    background: url(../img/2.png) -328px -2413px repeat-x;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 10
}

我后来试了下单独把切片保存为一张png作为背景图,则没有上面的问题,图片排列是非常紧凑的.
请问怎么解决精灵图切片引入背景图片有间隙的问题呢?

Answer 1

首先一般来说精灵图都不会用来repeat的，另外这种类型的大图也一般是不会合并入精灵图。

我觉得lz的问题可能是因为精灵图的空白边距问题？
一般来说合成精灵图的各个图片之间会留有一定的边距，所以在重复时候会有一定的空白。
或是lz能否把图展示一下？