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;
}

HTML，CSS导航菜单使用图像

3 个答案: