2017-09-30 30 views
-1

ページ全体の背景は#111111でなければなりません。背景が繰り返し表示されているNavbarは、Navbar以上の背景色を変更するようです。css背景画像が背景の背景色をぼやけている

enter image description here

/index.htmlをenter image description here

これは、それがどのように見えるかです:私は

これは私が取得しています何で私がここで行方不明ですか分かりません/

<!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とgoogleで試してみましたが、私はこれらの問題を抱えています。 – BroKeOne

+0

あなたが私に尋ねる気にならないなら、どのブラウザを使用していますか?私は戻って、firefox、edge、でもう一度テストしました。私は完全にクロムをリセットし、まだこの異常を取得します。 – BroKeOne

+0

Firefox v55.0.3とChrome v61.0.3163.100 –

0

他のいくつかのブラウザをテストして、これがクロムでのみ起こっていることを確認した後、クロムをデフォルトにリセットし、結果を出さずにクロムを再開しました。私は完全にクロムをアンインストールし、新しくインストールすることにしました。これは明らかに私が持っていた問題を解決しました。