Question

我正在制作一些标签，使用背景图片作为悬停状态背景。唯一一个看起来不错的是“Day”。我认为，因为它只有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;
}

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

1 个答案: