php - 在CSS中重叠图像

Question

我正在使用包含我的 header 内容的 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;
}