css - 具有复杂定位案例的精灵

Question

当我用精灵图像 sprite_mbg.png 替换背景图像 mbg.jpg,mbgg.jpg,mbgr.jpg,mbgh.jpg 并将背景位置添加到输入的 css 时，按钮颜色由于宽度和位置而变得混合。

/*Sprite Image generated by Instant Sprite - Generate CSS Sprites Instantly*/

.sprite { background: url('http://s13.postimage.org/xmzbbctt1/sprite_mbg.png') no-repeat top left; width: 40px; height: 40px;  }
.sprite.mbg { background-position: 0px 0px;  }
.sprite.mbgh { background-position: -50px 0px;  }
.sprite.mbgg { background-position: -100px 0px;  }
.sprite.mbgr { background-position: -150px 0px;  } 

Answer 1

我改为垂直精灵，它解决了这个问题。