css图片拼接有缝隙 |css背景性渐变语法

.tile{
background-image:url(images/tiles.png);
background-repeat:no-repeat;
display:inline-block;
}
.tile_1{
width:100px;
height:100px;
background-position:0 0;
}
.tile_2{
width:100px;
height:100px;
background-position:-100px 0;
}
.tile_3{
width:100px;
height:100px;
background-position:-200px 0;
}

上面的代码是一个典型的CSS图片拼接的例子。其中，.tile表示拼接后的大图片，.tile_1,.tile_2,.tile_3表示拼接前的小图片。但是如果用户使用这段代码，很可能会出现小图片之间有明显的缝隙。

解决这个问题的方法有很多，其中一个比较简单的方法是在小图片的容器中添加font-size:0属性。这个属性可以让小图片之间没有空白字符，从而消除了图片之间的缝隙。代码如下：

.tile{
background-image:url(images/tiles.png);
background-repeat:no-repeat;
display:inline-block;
}
.tile_1,.tile_2,.tile_3{
width:100px;
height:100px;
font-size:0;
}
.tile_1{
background-position:0 0;
}
.tile_2{
background-position:-100px 0;
}
.tile_3{
background-position:-200px 0;
}

通过添加font-size:0属性，大家可以看到小图片之间的缝隙消失了，用户体验也得到了很大的提升。