html - CSS - 在锚点布局中定位背景图像

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？