在css中，可以利用「background-image」屬性來設定導航條的背景圖片，該屬性主要用於為元素添加背景圖像，只需將導航條元素添加「background-image:url (圖片路徑);”樣式即可。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css如何設定導覽條背景圖片
#在css中，可以利用background-image屬性來設定導覽條背景圖片，background- image 屬性為元素設定背景圖像。
元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。
預設地，背景圖像位於元素的左上角，並在水平和垂直方向上重複。
下面我們透過範例來看看怎麼利用background-image屬性來設定背景圖片，範例如下：
首先我們建立一個導覽條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{margin:0;padding: 0;}
ul{
list-style-type: none;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover{
background-color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻动态</a></li>
<li><a href="#contact">联系我们</a></li>
<li><a href="#about">关于我们</a></li>
</ul>
<div style="background-color:pink;height:1500px;"></div>
</body>
</html>輸出結果：
此時導航條並沒有背景圖片，只需要給導航條元素新增「background-image:url(圖片路徑);」樣式即可，範例如下：
ul{
list-style-type: none;
overflow: hidden;
background-image:url(1118.02.png);
position: fixed;
top: 0;
width: 100%;
}輸出結果：
#（學習影片分享：css影片教學）
以上是css如何設定導航條背景圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
