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

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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名與空間、網(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)航條

<!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">新聞動態(tài)</a></li>
   <li><a href="#contact">聯(lián)系我們</a></li>
   <li><a href="#about">關(guān)于我們</a></li>
</ul>   
<div style="background-color:pink;height:1500px;"></div>
</body>
</html>

輸出結(jié)果：

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

此時導(dǎo)航條并沒有背景圖片，只需要給導(dǎo)航條元素添加“background-image:url(圖片路徑);”樣式即可，示例如下：

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

輸出結(jié)果：

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

到此，相信大家對“css怎么設(shè)置導(dǎo)航條背景圖片”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

分享標(biāo)題：css怎么設(shè)置導(dǎo)航條背景圖片
URL標(biāo)題：http://muchs.cn/article24/ijcdje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、App設(shè)計、網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容