無法添加背景圖像到導航菜單後面的標題

所以基本上，我試圖添加一個圖像在我的導航菜單後面。它結束了，我甚至不能添加圖像到標題了？無論我如何嘗試，它都不會顯示出來。甚至在此之前，當它顯示出來時，標題圖像出現在菜單上方，關於我正在查找的內容，而菜單是圖像的「頂部」。無法添加背景圖像到導航菜單後面的標題

CSS

#dolphincontainer{position:relative; color:#E0E0E0; 
padding-top:40px; 
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;} 
#dolphinnav{position:relative;;font-size:16px;text-transform:uppercase;font- weight:bold;padding:0 0 0 60px;} 
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;} 
#dolphinnav ul li{display:block;float:left;margin:0 1px;margin-top:-22px;} 
#dolphinnav ul li a{display:block;float:left;color:#3D3D3D;text-decoration:none;padding:8px;height:30px;width:60px;} 
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;} 
#dolphinnav ul li a:hover{background-color:#3D3D3D ;} 
#dolphinnav ul li a:hover span{display:block;color:white;width:auto;cursor:pointer;} 


#dolphinnav ul li a.current span{display:block;width:auto; no-repeat top right;height:33px;} 

#dolphin_inner{color: white; padding: 5px; font-size: 80%; height: 1em} 

#dolphin_inner a:link, #dolphin_inner a:visited, #dolphin_inner a:active{color:#fff} 
#dolphin_inner a:hover{color: white} 

body {background-color:#000000;} 
#header { 
background:url(images/header.png); 
} 




.innercontent{display: none;} 

#footer_menu ul{ 
list-style: none; 
margin: 0; 
padding: 10px 0 0 10px; 
position:absolute;bottom:50px;  
font-family:Helvetica,Arial,Verdana,sans-serif; 
font-weight:bold; 
font-size:12px; 
} 
#footer_menu ul li{ 
padding:0; 
margin: 0 0 0 30px; 
display:inline; 


} 
#footer_menu ul li a:link,a:visited,a:focus,a:active{ 
text-decoration: none; 
color: #3D3D3D; 


} 
#footer_menu ul li a:hover{ 
text-decoration: none; 
color: #fff; 
}

HTML

<body> 

<div id"header"> 

<div id="dolphincontainer"> 
<div id="dolphinnav"> 
    <ul> 
     <li><a href="index.html"><span>Home</span></a></li> 
     <li><a href="about.html"><span>About</span></a></li> 
    </ul> 
</div> 
<div id="dolphin_inner"> 
    <div id="about" class="innercontent"></div> 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
//dolphintabs.init("ID_OF_TAB_MENU_ITSELF", SELECTED_INDEX) 
dolphintabs.init("dolphinnav", 0) 
</script>

來源

2012-12-02 Bad Habit

小CSS應該做的伎倆：

#dolphinnav{ background-image: url('image-url-relative-to-css.png'); 
       background-repeat: repeat-x; }

或者不重複....

來源

2012-12-02 00:58:11 FredTheWebGuy

還是沒有..我知道有些東西我沒有看到，但是就像我一直在這裏待了一個小時哈哈。使用螢火蟲進行檢查時，表示找不到文件路徑，因爲它已經持續了好幾個小時。 –

無論如何，現在它會找到文件路徑並在FireBug中顯示圖片，但在網站中卻沒有。 –

另一個更新。通過添加'display：table' 'no-repeat-x;'之後圖像顯示出來，我還添加了'寬度：100％'，這使得它在整個屏幕上水平延伸。但它垂直方向很小，它只覆蓋我的菜單中的字母，當它應該覆蓋大約4倍的空間時。 –

無法添加背景圖像到導航菜單後面的標題

回答

相關問題