css导航怎么加图片和文字(css导航怎么加图片)

CSS导航栏是一个网站中必不可少的部分，它可以方便用户快速定位到所需的页面，同时也可以起到美化网站的作用。在导航栏中加入图片，可以使导航更直观、更有吸引力。下面我们来讲一下CSS导航怎么添加图片。

以上是一个简单的导航栏代码，下面我们要向其中的每个导航添加图片。首先，我们需要在HTML中给每个导航对应的标签设置一个类名或id，以便在CSS中样式选择器选择。

接下来，在CSS中定义每个类名对应的背景图片，可以使用background属性。

nav ul li a.home{
background: url("home.png") no-repeat center center;
}
nav ul li a.product{
background: url("product.png") no-repeat center center;
}
nav ul li a.service{
background: url("service.png") no-repeat center center;
}
nav ul li a.about{
background: url("about.png") no-repeat center center;
}
nav ul li a.contact{
background: url("contact.png") no-repeat center center;
}

通过以上代码，我们为导航栏的每个导航添加了一个对应的背景图片。其中，no-repeat表示图像不重复，如果需要重复可以使用repeat，也可以使用repeat-x垂直重复或repeat-y水平重复。center center表示图像居中显示。

以上就是如何为CSS导航栏添加图片的全部内容，希望本文对您有所帮助。