html - 如何让 Jarallax MDB 工作?

标签 html css bootstrap-4 parallax mdbootstrap

我有以下代码:

<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 效果。我做错了什么?

最佳答案

我有同样的问题,看来问题出在我自己的无知上。 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;
}

关于html - 如何让 Jarallax MDB 工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50475685/

相关文章:

javascript - CSS 不透明度过渡不适用于 Safari

jquery - 我的 fiddle 无法在我的网站上运行

css - 在按钮中居中放置两行文本

javascript - 缺少 asp :Button if I use Enabled=false 的 OnClientClick(或 HTML 中的 onclick)

JavaScript - 在特定条件下更新 &lt;textarea&gt; 值并将其附加到 <div>

javascript - 第三方网站加载时显示加载消息

javascript - 如何在单击时打开 tr 内的表 tr

css - 为什么 css calc 函数在 Android 上的 Chrome 中不能正常工作

css - 如何使用 Bootstrap v4 构建多行内联表单?

html - 如何使 Bootstrap 4 卡片在卡片列中的高度相同?