HTML導航欄圖片是建立網站時不可或缺的元素之一。設置導航欄圖片，對于網站的整體設計和用戶的使用體驗都有很大的影響。本文將介紹HTML導航欄圖片的設置方法。 首先，在HTML中加入導航欄位置的代碼：

<nav> 
<ul>
<li><a href="index.html">首頁</a></li> 
<li><a href="about.html">關于我們</a></li> 
<li><a href="products.html">產品介紹</a></li> 
<li><a href="contact.html">聯系我們</a></li> 
</ul>
</nav>

在上述代碼中，我們使用了nav和ul標簽，分別表示導航欄的位置和導航欄的鏈接。li標簽則表示導航欄的每一個選項。 然后，在CSS中添加導航欄圖片的樣式：

nav ul {
list-style: none;
display: flex;
justify-content: space-between;
background-color: #ffffff;
box-shadow: 0px 2px 10px #888888;
padding: 10px;
align-items: center;
height: 100px;
}
nav ul li a {
display: block;
font-size: 20px;
color: #666666;
text-decoration: none;
padding: 10px;
margin: 5px;
border-radius: 5px;
transition: all .5s ease-in-out;
}
nav ul li a:hover {
color: #ffffff;
background-color: #f15b2a;
}
nav ul li a.home {
background-image: url('home.png'); /*設置導航欄首頁圖標*/
background-repeat: no-repeat;
background-position: center top;
text-indent: -9999px;
width: 50px;
height: 50px;
}

上述代碼中，我們使用了CSS中的background-image、background-repeat、background-position、text-indent等屬性，設置了導航欄中首頁的圖片，并使其垂直居中。同時，我們還設置了導航欄的背景顏色、邊框陰影、內邊距等樣式，以及導航欄鏈接的普通狀態和鼠標懸停狀態（hover）的樣式。 在HTML和CSS中設置好導航欄圖片后，我們就可以在網站中使用美觀、有吸引力的導航欄，提高用戶的使用體驗和整體美觀度。