html - 使用图像的 HTML ,CSS 导航菜单

Question

我有一个 78x26 像素的图像，我想将其用作导航栏的按钮。这样做最合适的方法是什么？

我希望图像在它不保留的那一刻保持其原始大小

#navbar li {
    background-image:url("../images/btns.png");
}

我知道我可以做这样的事情，但我又如何将文本放在图像上

<li><a href="#"><img src="images/btns.png"></a></li>

Answer 1

您还必须指定<li>. 请试试这个：

#navbar li {
    background-image:url("../images/btns.png");
    width: 78px;
    height:26px;
}

<li>我相信元素是内联的，因此您必须执行以下操作才能使它们并排显示：

#navbar li {
        background-image:url("../images/btns.png");
        width: 78px;
        height:26px;
        float: left;
    }

Answer 2

background-image单独不缩放图像。如果您觉得它没有以原始大小呈现，可能是因为它在重复。

改用这个：

background:url("../images/btns.png") no-repeat;

接着

<li><a href="#">Your text here</a></li>

您现在可能需要调整大小li以适合您的设计

如果您在线加载代码可能会更好，例如在 codepen.io 上

Answer 3

我相信这是标准的方式：

<nav class="navbar" role="navigation">
    <ul class="main-nav">
        <li class="menu-1"><a href="#">Menu-Link-text</a></li>
        <li class="menu-2"><a href="#">Menu-Link-text</a></li>
        ....
        </li>
    </ul>
</nav>

.navbar {
    overflow:hidden /* trick to force the navbar to wrap the floated <li>s */
} 
.main-nav li {
    float: left;
    display: inline; /* bug fix for older IE */
} 
.main-nav a {
    display:block; /* bigger click area */
    width: 78px;
    height:26px;
    text-indent: 100%; /* Text in the link for search engines and assistive technologies */
    whitespace: nowrap; /* see above */
    background: #yourFallBackBackgroundColor url("../images/btns.png") no-repeat 0 0; /* use a sprite with all images in one file and move them within background as required */
}
.menu-1 {
    background-position:0 0;
}
.menu-2 {
    background-position:-78px 0;
}
.menu-3 {
    background-position:-156px 0;
}