Как заставить работать 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 есть фрагмент кода 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;
}