javascript - ホバーhtml/css後に表示される背景画像の位置を変更する

Question

編集: background-position は背景画像の位置を変更します。私が直面している実際の問題は別のものであることに気付きました。これは、このスレッドで見ることができます: background-position を変更すると背景画像が消えますか?

さて、順序付けられていないリスト内に一連のリンク (a href's) があり、ユーザーがそれらの上にカーソルを合わせると、リンクの上に黒い背景画像が表示され、リンクの色が黒に変わります。フォトショップで表示される背景画像が既にあります。これが私がこれまでにしたことです

li:hover {
    color: white;
    background: url(../images/liHover.png);
}

さて、問題は、画像が表示したい場所に表示されないことです。リンクを画像の中央に配置したい。画像は、実際に表示したい場所の 3 ピクセル下のようなものです。どのリンクにカーソルを合わせても同じです。画像は常に、必要な場所の 3 ピクセル下にあります。表示される画像の位置を変更する方法と、その画像を通常あるべき場所から数ピクセル上に移動する方法はありますか? (CSS でこれを行うことができなくても、誰かがこれを達成できる Javascript 関数を作成できれば、それは素晴らしいことです)。

リストはちょうど

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>