2017-09-30 208 views
-1

整個頁面的背景應該是#111111。具有重複背景的我的導航欄似乎改變了導航欄和以上的背景的顏色。我不知道我在這裏失蹤css背景圖像搞亂了身體的背景色

這就是我得到: enter image description here

這是它應該是什麼樣子:

enter image description here

/的index.html/

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>SomeWhere | Home</title> 
 
<link href="./css/style.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 
\t <div class="container" > 
 
\t \t <header> 
 
\t \t \t <nav class="topnav"> 
 

 
\t \t \t </nav> \t 
 
\t \t </header> \t 
 

 
\t \t 
 
\t </div> 
 
</body> 
 
</html>

/的style.css/

/* CSS Document */ 
 
body{ 
 
\t background-color: #111111; 
 
} 
 
#container{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: #111111; 
 
\t color: #ffffff; 
 
\t 
 
} 
 

 
nav.topnav{ 
 
    margin: 0; 
 
    top: 138px; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 54px; 
 
    background: #111111 url(../imgs/nvbck.png) repeat; 
 
    position:absolute; 
 
    z-index:-1; 
 
}

+0

你能分享一個鏈接到您的網頁或分享png文件嗎?無法用以上代碼重現問題:https://codepen.io/anon/pen/QqgeOB nav.topnav只有54px高,似乎不會影響頁面的其餘部分。 –

+0

nvbck.png位於https://ibb.co/gs6M0b。這應該沒問題,Daniel Sixl嘗試了它,但他沒有得到同樣的問題。在我的生命中,我無法弄清楚我在結尾處得到了什麼。 – BroKeOne

回答

0

看起來不錯,當我將它複製: https://jsfiddle.net/Sixtus78/97r4mm39/

/* CSS Document */ 
 

 
body{ 
 
\t background-color: #111111; 
 
} 
 

 
.container{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: #111111; 
 
\t color: #ffffff; 
 
\t 
 
} 
 

 
nav.topnav{ 
 
    margin: 0; 
 
    top: 138px; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 54px; 
 
    background: #111111 url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/bo_play_pattern.png) repeat; 
 
    position:absolute; 
 
    z-index:-1; 
 
}
<div class="container" > 
 
\t \t <header> 
 
\t \t \t <nav class="topnav"> 
 
     Nav 
 
\t \t \t </nav> \t 
 
\t \t </header> \t 
 
\t \t <div class="hero"> 
 
\t \t Hero 
 
\t \t </div> 
 
\t \t <div class="content"> 
 
\t \t \t Content 
 
\t \t </div> 
 
\t \t <footer></footer> 
 
\t \t 
 
\t </div>

+0

謝謝。不知道爲什麼我在這個問題上遇到這個問題。我曾嘗試過這在Firefox和谷歌,我有這些問題。 – BroKeOne

+0

如果你不介意我問,你使用什麼瀏覽器?我回去再次用firefox進行測試,邊緣和,我沒有得到這個問題。我徹底重置了Chrome並仍然出現這種異常現象。 – BroKeOne

+0

我在Firefox v55.0.3和Chrome v61.0.3163.100中登記了 –

0

在測試了其他幾個瀏覽器並且發現這隻發生在chrome中之後,我將chrome重置爲默認值並重新啓動chrome而沒有任何結果。我決定徹底卸載chrome並重新安裝。這顯然解決了我遇到的問題。