在網(wǎng)頁設(shè)計中，經(jīng)常需要在圖片上添加導(dǎo)航，使得網(wǎng)站界面更加美觀，用戶體驗更好。這時我們常常會用到CSS技術(shù)來實現(xiàn)。下面，我們來具體看看如何用CSS在圖片上添加導(dǎo)航。

首先，我們需要用HTML代碼來插入圖片，如下：

<div class="img-container">
<img src="picture.jpg" alt="美麗的圖片">
</div>

上面的代碼將圖片放在一個class為img-container的div里面。接下來，我們用CSS給這個div添加相應(yīng)的樣式：

.img-container {
position: relative;
display: inline-block;
}
.img-container:hover .img-nav {
display: block;
}
.img-nav {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.img-nav ul li {
display: inline-block;
margin: 0 10px;
}

在上面的代碼中，我們首先給img-container設(shè)置了position:relative，這是因為后續(xù)我們的導(dǎo)航條是需要position:absolute來絕對定位的。

然后，我們給.img-container:hover .img-nav添加了一段CSS代碼，這是觸發(fā)導(dǎo)航出現(xiàn)的關(guān)鍵。當(dāng)鼠標(biāo)指針停在img-container上時，.img-nav就會顯示出來。

.img-nav是我們用來顯示導(dǎo)航的div，它的display屬性被設(shè)置為none，所以一開始并不顯示。我們給.img-nav設(shè)置了position:absolute以及top、left和transform屬性，將其絕對定位在圖片的中心位置，這樣導(dǎo)航才會顯得更美觀。

最后，我們給導(dǎo)航的ul和li元素添加樣式，來控制導(dǎo)航的樣式和排列方式。

通過上述的CSS代碼，我們就能在圖片上添加出美觀的導(dǎo)航條了。這對于網(wǎng)頁設(shè)計師來說，是一個非常實用的技能。