视差 html 和 css 错误

Question

我是编码新手，但似乎无法让带有视差图像的简单主页正常工作。已经尝试过很多次不同的方法来做这件事，比我现在记得的还要多，其中 none 似乎有效。谁能看到我忘记的代码错误？

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: #000000;
  line-height: 1.5;
  overflow-x: hidden;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 20px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 16px;
}
/*Menu*/

#menu {} #menu ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
#menu li {
  float: left;
  list-style: none;
}
#menu a {
  background-color: #cccccc;
  display: block;
  color: #ffffff;
  font-weight: 700;
  display: block;
  padding: 14px 14px;
  text-align: center;
  text-decoration: none;
}
#menu a:hover {
  background-color: #ffffff;
  color: #000000;
}
/*Parallax*/

.parallax1-img,
.parallax2-img. {
  opacity: 0.4;
  background-size: 206px 147px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: repeat;
}
.parallax1-img {
  min-height: 100%;
  background-image: url("./logo.jpg");
}
.parallax2-img {
  min-height: 30%;
  background-image: url("./logo.jpg");
}
/*Containers*/

.container {
  position: relative;
}
.container-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*Text*/

.center {
  text-align: center!important;
}
.padding-xlarge {
  padding: 16px 32px!important;
}
.black {
  color: #fff!important;
  background-color: #000!important;
}
.xlarge {
  font-size: 24px!important;
}
.animate-opacity {
  animation: opac 1.5s;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="stylesheet" href="index_styles.css">
</head>

<body>
  <!-- Navbar (sit on top) -->
  <div id="menu">
    <ul>
      <li><a>HOME</a>
      </li>
    </ul>
  </div>

  <!-- Parallax Effect 1-->
  <div class="parallax1-img container">
    <div class="container-middle" style="white-space: nowrap;">
      <span class="center padding-xlarge black xlarge animate-opacity">My WEBSITE</span>
    </div>
  </div>

</body>

</html>

Answer 1

如果你想使用像 height: 100%; 这样的相对高度，你必须设置：

html, body {
height: 100%;
}

如果您只有 100% 的身高，那是行不通的。

看看这个：http://codepen.io/powro01/pen/pEBBgR

我想这就是你想要的效果。

PS。 对于视差效果，您必须设置 background-attachment: fixed after background-image。

视差 html 和 css 错误

parallax html and css error

javascript

html

css

parallax