在css中重叠图像

Question

我正在使用包含头部内容的PHP包含。对于我的导航部分，我使用的是仅包含文本功能的列表。我在列表项上使用了一小部分PHP，基本上表示当前页面是什么，在导航中的列表项上显示图像。以下是我“努力”实现的目标：

如您所见，我希望将蓝色形状的图像放在当前页面列表项的顶部。

但以下是我所取得的成果，您会发现图像已显示但不应该显示。我在.current类上使用绝对定位来显示整个图像，但是我不能在图像上使用绝对位置，因为它不会在另一个列表项上正确显示。我该怎么办？

以下是相关的CSS和HTML / PHP：

<div id="navbar">
        <ul>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="current"';?> href="#">Home</a></li>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'shows.php')) echo 'class="current"';?> href="pages/shows.php">Shows</a></li>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'classes.php')) echo 'class="current"';?> href="pages/classes.php">Classes</a></li>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'noticeboard.php')) echo 'class="current"';?> href="pages/noticeboard.php">Notice Board</a></li>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';?> href="pages/about.php">Our Story</a></li>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact.php')) echo 'class="current"';?> href="pages/contact.php">Contact</a></li>
        </ul>


.current {
width:138px;
height:57px;
background-image: url('../images/current.png');
background-repeat: no-repeat;
}

Answer 1

<li>元素限制了<a>标记的大小。 设置单个<li>项的大小以匹配标记的大小，您将看到整个内容。

修改后的代码：

<div id="navbar">
    <ul>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="current"';?> href="#">Home</a></li>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'shows.php')) echo 'class="current"';?> href="pages/shows.php">Shows</a></li>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'classes.php')) echo 'class="current"';?> href="pages/classes.php">Classes</a></li>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'noticeboard.php')) echo 'class="current"';?> href="pages/noticeboard.php">Notice Board</a></li>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';?> href="pages/about.php">Our Story</a></li>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact.php')) echo 'class="current"';?> href="pages/contact.php">Contact</a></li>
    </ul>
</div>

#navbar ul li {
    width:138px;
    height:57px;
}

.current {
    width:138px;
    height:57px;
    background-image: url('../images/current.png');
    background-repeat: no-repeat;
}

Answer 2

由于显而易见的原因，元素的背景图像不会溢出元素本身。因此，如果您将背景图片放在A标记上，则需要确保A标记足够大以适应背景。你可以尝试这样的事情：

A {
    display: inline-block;
    width: 138px;
    height: 57px;
}

您必须调整所有其他CSS才能正确定位。