html - CSS - 在 anchor 中断布局中定位背景图像

Question

jsFiddle

我有一个 BG 图像附加到类 selectedlink

的链接

图像显示，但当我将其向下放置时，它消失在链接的视觉参数之外。这就像 href 是图像的窗口。

代码如下:

CSS:

div#intnavIcons a.selectedlink { 
    color: #900404; 
    font-size:11px; 
    font-weight:bold; 
    padding:#FFF; 
    text-decoration:underline; 
    background: url("/images/nav/bg-nav-current.png") no-repeat scroll center bottom transparent;
}

HTML:

<div id="intnavIcons">
   <a class="selectedlink">This is selected</a>
   <a>This is not selected</a>
   <a>This is not selected</a>
   <a>This is not selected</a>
</div>

任何人都可以看到我是否遗漏了一些我的风格，让图像保持在 href 之上？

为了进一步向下移动它，我只是添加 background-position: 0px 10px;

Answer 1

背景图片仅限于元素的框(具体框取决于background-clip样式)。如果您试图将它向下移动，它会在碰到盒子底部时开始消失。

您可能想尝试添加 padding-bottom:10px。

我还注意到你有 padding:#FFF，这是没有意义的。您是说 background-color 吗？