PSD 到 HTML 导航栏切片问题

PSD to HTML navigation bar slicing concern

在我的 PSD 文件中,我有一个导航栏,背景中有一些灯光效果。我有点担心是应该将整个导航栏切片然后添加文本还是将其切成更小的部分?哪个是最佳实践? 我是这个主题的新手,所以任何想法都会非常感激。

您肯定想将导航栏图像剪切成几块。使用 css 将它们添加到每个导航栏链接的背景中。以后就省得你头疼了。

这是一个很好的例子 jsfiddle

Css

#nav {
    display: block; 
    height: 40px;
    line-height: 35px; 
    list-style: none outside none; 
    margin: 20px auto 0 auto; 
    position: relative; 
    max-width: 750px; 
    min-width: 750px; 
    width: 78.2%;
}

#nav li {
    display: inline;
    text-align: center;
    float:left;
}

#nav li a{
    color: #fff; 
    display: block; 
    float: left; 
    font-family: HelveticaNeue-light,Helvetica,sans-serif; 
    font-size: 1em; 
    height: 100%; 
    padding: 0px 23px 0; 
    text-align: center; 
    text-decoration: none;
    line-height: 40px;
    background:#4D4D4D; 
    position: relative;
}

#nav li a span {
    position: absolute;
    left: 0;
    top: 40px;
    display: none
}

#nav li a:hover, #nav .active a {
    background: url("path/to/image.png") no-repeat bottom  center #a4c723;
    color: #4d4d4d;
}

#nav li a:hover span, #nav .active a span {
    display: block;   
}

如果你指的是渐变,你可以使用渐变生成器http://www.colorzilla.com/gradient-editor/

对我来说,使用尽可能少的图像是最佳做法。用 css 绘制你的导航栏,祝你好运