css导航条 图片背景 |cisco css

.nav{
background-image:url('nav-bg.jpg');
width: 960px;
height: 50px;
margin: 0 auto;
}

在上面的代码中，大家使用了一个名为nav-bg.jpg的图片作为导航条的背景。同时，大家还设置了导航条的宽度为960像素，高度为50像素，并且让它居中显示。

如果大家想要让导航条背景图片重复出现，只需添加background-repeat属性即可：

.nav{
background-image:url('nav-bg.jpg');
width: 960px;
height: 50px;
margin: 0 auto;
background-repeat: repeat-x; /* 横向重复 */
}

在上面的代码中，大家使用了repeat-x值，表示让图片在水平方向上重复出现。

如果大家想要让背景图片固定，不随导航条的滚动而移动，只需添加background-attachment属性即可：

.nav{
background-image:url('nav-bg.jpg');
width: 960px;
height: 50px;
margin: 0 auto;
background-repeat: repeat-x;  /* 横向重复 */
background-attachment: fixed; /* 图片固定 */
}

在上面的代码中，大家使用了fixed值，表示让图片固定在视口中的位置。

通过使用不同的背景图片，大家可以让导航条呈现出不同的风格和氛围，从而更好地为用户服务。