css如何設定導航條背景圖片-css教學-PHP中文網

css如何設定導航條背景圖片

WBOY

發布： 2021-11-26 17:50:11

原創

8552 人瀏覽過

在css中，可以利用「background-image」屬性來設定導航條的背景圖片，該屬性主要用於為元素添加背景圖像，只需將導航條元素添加「background-image:url (圖片路徑);”樣式即可。

css如何設定導航條背景圖片

本教學操作環境：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>

登入後複製

輸出結果：

css如何設定導航條背景圖片

此時導航條並沒有背景圖片，只需要給導航條元素新增「background-image:url(圖片路徑);」樣式即可，範例如下：

ul{
       list-style-type: none;
       overflow: hidden;
       background-image:url(1118.02.png);
       position: fixed;
       top: 0;
       width: 100%;
   }

登入後複製

輸出結果：

css如何設定導航條背景圖片