1

目前我的菜单正在使用 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/ 图像不是透明的而是白色的，所以边框应该在三角形内“消失”。

4

3 回答 3

1
  • 我不认为这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 实现你想做的事情；）

于 2013-01-05T00:18:03.837 回答
1

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

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

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

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

于 2013-01-05T00:15:08.403 回答
0

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

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

您可以尝试为您的 A:active 添加填充以给您一点喘息的空间。

您的新 CSS 将如下所示：

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

让我知道这是否适合你。

于 2013-01-05T00:29:20.440 回答