链接定位的Css背景图像

目前我的菜单使用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索引集，图像也在边框下。以下是链接的css：

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

你有没有想过为什么这不起作用？我也试过使用

右边距：-1px但这不会改变任何事情

我只是注意到，当我在背景css中设置eg-5px时，应该伸出边框的图像的其余部分没有伸出，只是消失了

编辑：这里有一个JSFIDLE：
图像不是透明的，而是白色的，因此边框应该“消失”在三角形内部。
据我所知，背景属性中没有“…右中”和“-1px；”之类的内容。您可以使用“right”或数字值。你能做的是使用高于100%的百分比值，但在某些情况下这是不精确的，我认为这不会解决你的问题

如果您正在使用带有背景的锚定标记，并且希望此背景与右侧的边框重叠，则此边框需要位于父容器上，并且您将锚定标记（而不是其背景）a-1px向右移动（右侧：-1px；如果您在“a”标记上使用position:absolute，则在父容器上移动position:relative）

编辑：在你的小提琴上使用这个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;
}

​仍将尝试改进它，因为它有点凌乱…

我不认为
background:someColor-url（something）不重复中右方-1px
是有效的语法<代码>背景：someColor url（某物）居中右侧不重复是
为什么需要使用
z-index
使用
a{display:inline block}

编辑：您可以使用
calc（100%-1px）
但这仅由IE9+Saf6+支持，仍然不支持Opera:（并且某些浏览器需要供应商前缀）。

虽然您可以通过简单的CSS2.1；）实现您想要做的事情
 我相信我已经正确地阅读了你的问题

我认为这里的问题是背景将被剪裁在声明它的元素的边缘。它不会超出元素的边界

你可以尝试在你的A:active中添加填充物，给你一点喘息的空间

您的新CSS如下所示：

A:active{
background:url(24d2535.jpeg); no-repeat center right -1px;
z-index:100;
padding-right: 5px;
position:relative;
}

让我知道这对你是否有效。
如果是，你会有问题的。获取更多帮助z-index试图获取父div边框前的图像。使用“内联块”似乎不起作用。在Chrome&FF中似乎效果很好，但IE做了一些奇怪的事情。。。不确定是因为它在做什么，可能是有填充物的。我们在谈论哪个版本的IE？我刚刚编辑了我的答案。在你的小提琴上检查一下。我对IE9有意见。。。但在它似乎没有这样做，我忘了在我的本地文档：pI恐怕你的更新代码移动了整个div，因此文本也必须移动。但正如我在上面的评论中所提到的，它在IE9中也起作用。在任何主流浏览器中都看不到任何问题，所以这是个好消息！你有一个实时链接，这样我可以看到整个页面吗？有时候，像这样一把简单的小提琴很难帮上忙。这似乎不起作用。就我所知，第七题的答案是有效的。另一方面，它不是a:active{}，而是a.active。这并不重要。为这个失误道歉，好的。是的，使用父容器定位您的孩子是正确的。