CSS導(dǎo)航欄是一個網(wǎng)站中必不可少的部分，它可以方便用戶快速定位到所需的頁面，同時也可以起到美化網(wǎng)站的作用。在導(dǎo)航欄中加入圖片，可以使導(dǎo)航更直觀、更有吸引力。下面我們來講一下CSS導(dǎo)航怎么添加圖片。

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">服務(wù)</a></li>
<li><a href="#">關(guān)于</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</nav>

以上是一個簡單的導(dǎo)航欄代碼，下面我們要向其中的每個導(dǎo)航添加圖片。首先，我們需要在HTML中給每個導(dǎo)航對應(yīng)的標(biāo)簽設(shè)置一個類名或id，以便在CSS中樣式選擇器選擇。

<nav>
<ul>
<li><a href="#" class="home">首頁</a></li>
<li><a href="#" class="product">產(chǎn)品</a></li>
<li><a href="#" class="service">服務(wù)</a></li>
<li><a href="#" class="about">關(guān)于</a></li>
<li><a href="#" class="contact">聯(lián)系我們</a></li>
</ul>
</nav>

接下來，在CSS中定義每個類名對應(yīng)的背景圖片，可以使用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;
}

通過以上代碼，我們?yōu)閷?dǎo)航欄的每個導(dǎo)航添加了一個對應(yīng)的背景圖片。其中，no-repeat表示圖像不重復(fù)，如果需要重復(fù)可以使用repeat，也可以使用repeat-x垂直重復(fù)或repeat-y水平重復(fù)。center center表示圖像居中顯示。

以上就是如何為CSS導(dǎo)航欄添加圖片的全部內(nèi)容，希望本文對您有所幫助。