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

【问题标题】：CSS - positioning background image in anchor breaks layoutCSS - 在锚点布局中定位背景图像
【发布时间】：2012-12-23 07:45:27
【问题描述】：

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;

【问题讨论】：

标签： html css positioning background-image

【解决方案1】：

背景图片仅限于元素所在的框（具体框取决于background-clip样式）。如果您尝试将其向下移动，它会在到达框底时开始消失。

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

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

【讨论】：

嗯，不知道我怎么错过了padding:#FFF，好尴尬。嗯，你是对的，padding-bottom 起作用了。