链接定位的css背景图片

Question

目前我的菜单正在使用 div 作为链接。不用说这不是好的做法。现在我将其更改为使用链接标签，但我遇到了一个问题。

当链接处于“事件”状态时，例如您在该页面上，将应用背景图像。此背景图像居中于右侧，比 div 远一个像素，因此它与 div 的边框重叠。这是 div 的 CSS:

background-image: url('triangle.png');
background-position: center right;
background-repeat: no-repeat;
margin-right:-1px;
z-index:100;
position:relative;

现在，将此方法应用于链接标记似乎不起作用。我已将图像向右移动 1 个像素，但即使设置了 z-index，图像也位于边框下方。这是链接的 CSS:

background:url('triangle.png') no-repeat center right -1px;
z-index:100;
position:relative;

关于为什么这不起作用的任何想法？我也尝试过 margin-right:-1px; 但这并没有改变任何东西。

我只是注意到，当我在背景 css 中设置例如 -5px 时，应该突出边界的图像的其余部分并没有突出，它只是消失了。

编辑:这是一个 jsfiddle:http://jsfiddle.net/UkYmJ/该图像不是透明的而是白色的，因此边框应该在三 Angular 形内“消失”。

Answer 1

据我所知，没有“...居中右“和”-1px;”这样的东西到背景属性。您可以使用“正确”或数字值。你可以做的是使用高于 100% 的百分比值，但在某些情况下这会不精确，我认为这不会解决你的问题。

如果您使用的是带有背景的 anchor 标记，并且您希望该背景与右侧的边框重叠，则该边框需要位于父容器上，您将移动 anchor 标记(而不是其背景)向右 -1 像素(右:-1 像素；如果您在“a”上使用position:absolute，则标记position:relative；在父级上)。

编辑:在你的 fiddle 上使用这个 css，它对我有用:

#menu{
    width:149px;
    border:1px solid red;
}
#menu a{
    display:block;
    padding:10px;
    width:109px;
    text-decoration:none;
    font-family:Comic Sans MS;
    font-size:large;
    color:black;
}
#menu a:hover, #menu a.active{
    color:#99182c;
}
#menu a.active{
    background:url('http://i48.tinypic.com/1p7yg9.png') center right no-repeat;
    position: relative;
    right: -21px;
}

仍然会尝试改进它，因为它有点乱......