画像が視差スクロールで表示されない

クロムツールが有効であることを示すため、ファイルパスが正しいことがわかりました。画像は表示されません。私は本当に明白な何かを見逃していると仮定しています。画像が視差スクロールで表示されない

意図はスペーサークラスですdivsは不透明です。その結果、divクラスのスペーサーに達するたびに再び現れるサイトの後ろにローマの素晴らしいイメージが表示されます。 z屈折率を有する

CSS

header { 
    width: 100%; 
    height: 100px; 
    background-color: black; 
    color: grey; 
position: absolute; 

} 

body { 
    margin: 0; 
} 

.parallax { 
    background-image: url("rome.jpg"); 

    min-height: 500px; 

    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

.content{ 
    width: 100%; 
    height: 300px; 
    background-color: black; 

} 

.spacer { 
width:100%; 
height:250px; 
opacity: 0.2; 

} 

#logo{ 
float: left; 
margin-left: 25px; 
font-size: 30px; 
margin-top: 35px; 

} 

#menu ul li { 
    color: white; 
    display:inline; 
    font-size: 25px; 
    float: right; 
    padding-right: 30px; 
    padding-left: 0px; 
    margin-top: 35px; 
    list-style-image: none; 
    } 

    li a:hover { 

    color: white; 
    } 

    a:link, a:visited { 
    color: Grey; 
    text-decoration: none; 
    } 

    @media (max-width: 732px) { 
    #menu ul li {font-size: 12px; 
    } 
#logo { font-size: 15px; 
    margin-top: 40px; 
    margin-left: 10px; 
} 
} 
@media (min-width: 946px) { 
li {font-size: 12px; 
    } 
    ul { 
    margin-right: 45px; 
    } 
}

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name = "viewport" content= "width=device-width"> 
    <meta name = "keywords" content = "web design, mobile website, affordable design, professional website"> 
    <meta name = "autor" content = "Simon Dean"> 
    <title>Spartan Design</title> 
    <link rel = "stylesheet" href="./css/style.css"> 
    </head> 
    <body> 
    <header> 
     <h1 id = "logo"> <a href="#"> Spartan | Design </a> </h1> 

     <nav id = "menu"> 
      <ul> 
      <li> <a href="#"> Contact Us </a></li> 
      <li> <a href="#"> Portfolio </a> </li> 
      <li> <a href="#"> Home </a> </li> 
      </ul> 
     </nav> 

    </header> 


<div class="parallax"></div> 

<div class = "spacer"> 


</div> 

    <div class = "content"> 
    Shity shity shit 
    </div> 

    <div class = "spacer"> 


    </div> 

    </body> 
</html>

出典

2017-10-19 Simon Dean

-1

ブロック：1をzインデックスを持つdiv要素の上に配置されている：0、それらの位置は、 "相対" に設定されていると仮定すると、「絶対」または「固定」。現在、私は、ページ（位置：固定）を合わせて視差ブロックを変更して、ヘッダ、コンテンツおよびスペーサブロックの下に置い：

body { 
 
    margin: 0; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: black; 
 
    color: grey; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.parallax { 
 
    background-image: url(https://i.pinimg.com/736x/ff/bf/6e/ffbf6e5184f2cbae2d5c569b51f3de2d--the-colosseum-grand-tour.jpg); 
 
    min-height: 500px; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 0; 
 
} 
 

 
.content{ 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color: black; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.spacer { 
 
    width:100%; 
 
    height:250px; 
 
    opacity: 0.2; 
 
} 
 

 
#logo{ 
 
    float: left; 
 
    margin-left: 25px; 
 
    font-size: 30px; 
 
    margin-top: 35px; 
 
} 
 

 
#menu ul li { 
 
    color: white; 
 
    display:inline; 
 
    font-size: 25px; 
 
    float: right; 
 
    padding-right: 30px; 
 
    padding-left: 0px; 
 
    margin-top: 35px; 
 
    list-style-image: none; 
 
} 
 

 
li a:hover { 
 
    color: white; 
 
} 
 

 
a:link, a:visited { 
 
    color: Grey; 
 
    text-decoration: none; 
 
} 
 

 
@media (max-width: 732px) { 
 
    #menu ul li { 
 
    font-size: 12px; 
 
    } 
 
    #logo { 
 
    font-size: 15px; 
 
    margin-top: 40px; 
 
    margin-left: 10px; 
 
    } 
 
} 
 

 
@media (min-width: 946px) { 
 
    li { 
 
    font-size: 12px; 
 
    } 
 
    ul { 
 
    margin-right: 45px; 
 
    } 
 
}

<header> 
 
    <h1 id="logo"> 
 
    <a href="#"> Spartan | Design </a> 
 
    </h1> 
 
    <nav id="menu"> 
 
    <ul> 
 
     <li><a href="#"> Contact Us </a></li> 
 
     <li><a href="#"> Portfolio </a></li> 
 
     <li><a href="#"> Home </a></li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
<div class="parallax"></div> 
 
<div class="spacer"></div> 
 
<div class="content"> Shity shity shit </div> 
 
<div class="spacer"></div>

出典

2017-10-19 11:51:32

、唯一のコードを入れて、あなたのanwserを詳しく説明しないでください問題を説明してください –

本当にありがとう、zインデックス-1がここで何をしているのか聞いてもらえますか？ –

nvm、私はそれをgoogled、それは知っているので非常に便利です！ –

画像が視差スクロールで表示されない

答えて

関連する問題