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/ 图像不是透明的，而是白色的，因此边框应该在三角形内“消失”。

Answer 1

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

如果您正在使用带有背景的锚标记，并且您希望此背景与右侧边框重叠，则此边框需要位于父容器上，您将移动锚标记（而不是其背景）右边的-1px（右边：-1px;如果你在“a”标签上使用position：absolute一个位置：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;
}

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

Answer 2

我不认为background: someColor url(something) no-repeat center right -1px;是有效的语法。 background: someColor url(something) center right no-repeat;是。
为什么需要使用z-index？
尝试将您的链接显示为块，同时仍然在a {display: inline-block}

编辑：您可以使用calc(100%-1px)，但这仅受IE9 + Saf6 +支持，但仍然不支持Opera：http://caniuse.com/#search=calc（并且某些浏览器需要供应商前缀）。
虽然你可以用普通的CSS2.1实现你想做的事情;）

Answer 3

我相信我已经正确地阅读了你的问题。

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

您可以尝试在A：活动中添加填充，为您提供一点呼吸空间。

你的新CSS会是这样的：

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

请告诉我这是否适合您。

Css背景图像的链接定位

3 个答案: