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

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; 
}