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/

相关文章:

html - 如何制作粘性页眉、页脚和侧边栏?

html - 在 bootstrap 4 中对齐列表项

html - 是否建议在使用 Bootstrap 时使用媒体查询

我的 ASP.NET CSS 上的 Jquery CSS 'Overlapping'

c# - 使用 C# 的 ASP .NET MVC 3 自定义 Html 5 数据属性

html - 显示 flex 问题

html - 操纵段落内的输入值和内容

html - 使用 class = row 操作第二个 div

html - Bootstrap Bread Crumbs 内容和堆叠

html - 增加 Bootstrap 4 表格的列宽