2017-02-11 18 views
0

私のウェブサイトのdivにある背景画像はinspect要素に表示され、背景画像はCSSで正しくパッチされていますが、コード内に何かが隠されています誰かが自分のコードを見て、その問題が何であるかを見ることができれば、大いに感謝するでしょう。背景画像何かで覆われている背景画像

* { 
    margin:0; 
    padding:0; 
    box-sizing: border-box; 
    list-style-type:none; 
    text-decoration: none; 
} 

body,html { 
    width:100%; 
    height:100%; 
} 

body { 
    text-decoration:none; 
    margin:0; 
    padding:0; 
    background-color:#000; 
} 

.wallpaper { 
    background-image: url('/../images/wallpaper.jpg'); 
    background-repeat:no-repeat; 
    background-size:100% auto; 
    background-position:center top; 
    width:100%; 
    height:100vh; 
} 

.nav { 
    position:absolute; 
    top:10px; 
    width:100%; 
    height:50px; 
    overflow:hidden; 
    z-index:1; 
} 

.nav ul { 
    text-align:center; 
    float:right; 
    display:block; 
    margin:0 auto; 
    margin-right:50px; 
} 

.nav ul li { 
    float:left; 
    cursor:pointer; 
} 


.nav ul li a { 
    color:#fff; 
    font-size:16px; 
    line-height: 50px; 
    padding:0 10px 7px 10px; 
    font-family: "Playfair Display"; 
    text-transform: uppercase; 
} 

.nav ul li a:hover { 
    border-bottom:2px solid #fff; 
} 
<body> 
<div class="wallpaper"> 
    <p>Hello</p> 
</div> 
<div class="nav"> 
    <ul> 
     <li><a>Home</a></li> 
     <li><a>About</a></li> 
     <li><a>Contact</a></li> 
    </ul> 
</div> 
</body> 
+0

何かで覆われていますか?あなたはウェブページのビューを共有できますか? –

+0

あなたのリンクに画像がある場合、それはうまくいきますが、なんらかの理由で、パスからは機能しません。 –

答えて

0

この仕事はあなたのためでしょうか?

変更HTML:

<body> 
<div class="nav"> 
    <ul> 
     <li><a>Home</a></li> 
     <li><a>About</a></li> 
     <li><a>Contact</a></li> 
    </ul> 
</div> 
<div class="wallpaper"> 
    <p>Hello</p> 
</div> 
</body> 

変更CSS:

.wallpaper { 
    background-image: url('http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg'); 
    background-repeat:no-repeat; 
    background-size:100% auto; 
    width:100%; 
    height:100vh; 
} 

​​

0

あなたのコードと間違って何もありません。パスを再確認する必要があります。問題のある場所です。あなたのフォルダ構造を共有している場合は、エラーを指摘するのに役立つかもしれません。