当导航栏的背景颜色不是纯色,而是多种颜色混合或者渐变色填充的时候,这个时候就需要使用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所用格式,命名确定。