html - 如何让 Jarallax MDB 工作？

Question

我有以下代码:

<div class="view jarallax" data-jarallax = '{"speed":0.2 }' style="background- 
image: url('OFP/OFP_Group.jpg'); background-repeat: no-repeat; background- 
size: cover; background-position: center center;">
<div class="mask flex-center rgba-black-light"></div>
</div>

并且出于某种原因，我无法使其像 MDB 示例 (https://mdbootstrap.com/previews/docs/latest/html/parallax/index.html) 中所示那样工作。图像根本不显示，如果我将宽度添加到样式，它会显示图像，但是图像没有 jarallax 效果。我做错了什么？

Answer 1

我有同样的问题，看来问题出在我自己的无知上。 Parallax Intro section 中有一段 CSS 代码.把它放在你的空白 style.css 文件中，它应该可以正常工作。以下是您应该放入 CSS 文件中的代码

/* Required for full background image */

html,
body,
header,
.jarallax {
  height: 100%;
}

@media (max-width: 740px) {
  html,
  body,
  header,
  .jarallax {
    height: 100vh;
  }
}

.top-nav-collapse {
  background-color: #82b1ff !important;
}

.navbar:not(.top-nav-collapse) {
  background: transparent !important;
}

@media (max-width: 768px) {
  .navbar:not(.top-nav-collapse) {
    background: #82b1ff !important;
  }
}
@media (min-width: 800px) and (max-width: 850px) {
  .navbar:not(.top-nav-collapse) {
    background: #82b1ff !important;
  }
}

h5 {
  letter-spacing: 3px;
}