css - 为什么我的悬停背景被移动了

Question

我正在制作一些标签，使用背景图像作为悬停状态背景。唯一看起来不错的是“日​​”。我想，因为它只有 3 个字符，而其他选项卡是 4 个字符。有没有办法让悬停背景以所有这些为中心？这是列表的 CSS。

    li {
    font: 9pt "Helvetica Neue", Helvetica, Arial, "Trebuchet MS", Trebuchet, serif;
    margin-top: .192333333em;
    float: right;
    height: 19px;
    width: 40px;
    margin-left: 10px;
    display: inline-block;
    margin: 7px;
}
li.current {
    background: url('img/red-current-bg.png') no-repeat;
    line-height: 1.6em;
}

ul#tabnav { 
    margin: 0;
}

ul#tabnav li a {
    text-shadow: 0 1px #800000;
    text-decoration: none;
    padding: 8px 11px;
    line-height: 1.6em;
}

ul#tabnav li:hover {
    background: url('img/red-current-bg.png') 0 0 no-repeat;
}

Answer 1

是否可以只调整背景的水平位置来调整像素或居中图像？

ul#tabnav li:hover {
  background: url('img/red-current-bg.png') 3px 0 no-repeat;
}
                            or
ul#tabnav li:hover {
  background: url('img/red-current-bg.png') center top no-repeat;
}