我有以下代码:
<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/