当导航栏的背景颜色不是纯色，而是多种颜色混合或者渐变色填充的时候，这个时候就需要使用ps切图平铺来实现了。
css样式
<style>*{margin: 0;padding: 0;}a{text-decoration: none;}li{list-style: none;}.nav{width: 995px;padding-left: 5px;height: 37px;margin: 50px auto;/* 导航栏背景颜色是渐变色的时候，选择使用剪切垂直向下的1px的图片（1px是遵循最小原则），给导航栏设置背景图，然后默认设置为平铺。./../img/background1.jpg是图片的路径*/background: url(./../img/background1.jpg);}.nav li a {float: left;width: 77px;height: 37px;line-height: 37px;text-align: center;font-size: 14px;color: #6b747d;}.nav li a:hover{height: 43px;/*鼠标滑过升高6px，背景颜色改变，因为背景色也不是纯色填充，所以同样适用背景平铺*/margin-top: -6px;background: url(./../img/background2.jpg);}</style>
页面部分
<ul class="nav"><li><a href="#">渐变色</a></li><li><a href="#">渐变色</a></li><li><a href="#">渐变色</a></li><li><a href="#">渐变色</a></li><li><a href="#">渐变色</a></li> </ul>
ps切图方法：
打开ps软件，选择矩形选框工具，从上往下选择宽度为1px的图片，这里是为了保持最小原则，所以只切1px。确定选区之后ctrl+c复制，ctrl+n新建一个剪贴板，ctrl+v复制到剪贴板上，ctrl+alt+shift+s存储为WEB所用格式，命名确定。
