Question

所以我知道文件路径是正确的，因为chrome工具显示它全部有效，我只是看不到图像。我假设我错过了一些非常明显的东西。

意图是间隔类div是不透明的，因此你会在网站后面看到罗马的漂亮图像，每次到达div类间隔时它都会重新出现。

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>

图像没有显示在视差滚动上

0 个答案: