html - CSS 导航图像背景

Question

我正在为 wordpress 制作模板，我无法解决这个问题:

我有自己的导航风格:

<style>
body {
 background: #FFFBD0;
}

/* Navigation */
ul {
 list-style-type:none;
 margin:0;
 padding:0;
}

.menu-item
{
 padding: 22px 20px 22px 20px;
 background:url('images/button_brown.png') no-repeat;
 display:inline;
}

a {
 color: #FFFBD0;
 text-decoration:none;
}

</style>

和我的导航:

<div class="div-menu">
<ul id="menu" class="menu">
    <li class="menu-item"><a href="">Home</a></li> 
    <li class="menu-item"><a href="">Button 2</a></li>
    <li class="menu-item"><a href="">Button 3</a></li>
</ul>
</div>

现在我正在尝试设计这样的按钮样式:

http://tinypic.com/r/2lmxb42/8

Answer 1

您不需要为此使用图像背景。您可以使用 background-color 和 border 来实现。您将 a 设置为具有边框、虚线和白色。然后你给 a 主要填充。然后，您将包含 a 的 li 设置为具有非常小的填充。给 li background-color 就可以了。

Working Fiddle

代码

HTML:

<div class="div-menu">
    <ul id="menu" class="menu">
        <li class="menu-item"><a href="">Home</a></li> 
        <li class="menu-item"><a href="">Button 2</a></li>
        <li class="menu-item"><a href="">Button 3</a></li>
    </ul>
</div>

CSS:

/* Navigation */
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

.menu-item {
    display:inline-block;
    background:rgb(64,18,20);
    padding:2px;
}

.menu-item a {
    display:block;
    padding: 22px 20px 22px 20px;
    color: #FFFBD0;
    text-decoration:none;
    border:dotted 1px white;
}

目标:

结果: