本篇內(nèi)容主要講解“css怎么設(shè)置導(dǎo)航條背景圖片”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css怎么設(shè)置導(dǎo)航條背景圖片”吧!

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、蚌山網(wǎng)站維護(hù)、網(wǎng)站推廣。

在css中，可以利用“background-image”屬性來設(shè)置導(dǎo)航條的背景圖片，該屬性主要用于為元素添加背景圖像，只需要給導(dǎo)航條元素添加“background-image:url(圖片路徑);”樣式即可。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css如何設(shè)置導(dǎo)航條背景圖片

在css中，可以利用background-image屬性來設(shè)置導(dǎo)航條背景圖片，background-image 屬性為元素設(shè)置背景圖像。

元素的背景占據(jù)了元素的全部尺寸，包括內(nèi)邊距和邊框，但不包括外邊距。

默認(rèn)地，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)。

下面我們通過示例來看一下怎樣利用background-image屬性來設(shè)置背景圖片，示例如下：

首先我們創(chuàng)建一個導(dǎo)航條

  
  
  
  
  
    *{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;
   }   




   
首頁
   
新聞動態(tài)
   
聯(lián)系我們
   
關(guān)于我們