css - 配置が複雑なスプライト

Question

背景画像 mbg.jpg,mbgg.jpg,mbgr.jpg,mbgh.jpg をスプライト画像 sprite_mbg.png に置き換え、入力の css に background-position を追加すると、幅と位置によってボタンの色が混ざってしまいます。

/*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

垂直スプライトに変更したところ、問題は解決しました。