CSS導航圖片是一種非常常見的網站導航樣式。通過使用CSS文本屬性和背景圖像等技術，可以實現很多種不同的導航圖片樣式。

.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
margin: 0 10px;
padding: 0;
}
.nav li a {
display: block;
height: 60px;
width: 60px;
background-image: url("nav.png");
text-indent: -9999px;
}
.nav li.home a {
background-position: 0px -0px;
}
.nav li.about a {
background-position: -60px -0px;
}
.nav li.services a {
background-position: -120px -0px;
}

在上面的代碼中，<ul class="nav">元素包含了導航鏈接，每個鏈接都是一個<li>元素。我們使用display: inline-block;確保每個鏈接都在同一行上，而且它們以相等的距離分開。接下來，我們使用使用CSS背景圖像屬性，為每個鏈接設置唯一的背景圖片和位置。然后，通過設置text-indent，我們將文本縮進到一個看不見的位置，這樣我們就得到了對鼠標的響應，同時隱藏了文本。

最終效果如下：

• Home
• About Us
• Services