css - 透明な背景のdivに背景色の遷移効果?

Question

上に戻る矢印の画像（スプライト）を表示するdivがあります。色の変更を実現するために、css を使用して background-position を変更しています。

background-position 遷移を使用せずに矢印の色を遷移するにはどうすればよいですか? 背景色のトランジション効果を探していますが、div の背景を透明にしたいので使用できません。私の質問があまり混乱しないことを願っています。

http://jsfiddle.net/9stkQ/

CSS:

.top{
    background:url(../images/top.png) -10px -10px;
    background-repeat:no-repeat;
    width:20px;
    height:20px;
    display:block;
    margin:0 auto;
    cursor:pointer;
}

.top:hover{
    background:url(../images/top.png) -10px 30px;
}