视差 js 不起作用...图像未显示答案

【问题标题】：Parallax js not working... image not showing视差 js 不起作用...图像未显示
【发布时间】：2021-02-26 14:18:08
【问题描述】：

使用建议的标记，css 是正确的，但绝对没有图像显示。当我使用常规的 img 标签（即：<img src="*"/>）时，图像显示完美......请帮助，我完全被难住了，这件事应该很容易。这是我的代码：

<div class="parallax-window" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="AE.jpg" data-natural-width="1920" data-natural-height="1000" style="height: 400px;"></div>

css:

.parallax-window {
    min-height: 400px;
    background: transparent;
}

任何见解将不胜感激。我正在运行 jquery 1.11.1 和基础

提前致谢。

【问题讨论】：

我认为我们在这里遗漏了一些重要的代码。实际图像在哪里？视差不适用于ul 和li 中的所有层吗？
好吧，我引用了这个 git：pixelcog.github.io/parallax.js...
啊，这有帮助:) 看起来还有更多 parallax.js'es。如果你运行你的页面并打开一个检查器，你能看到parallax-mirror 元素，它们里面有正确的图像吗？如果是这样，是否有任何元素具有背景颜色（或非透明背景）高于您的parallax-window 元素？
没有镜像，但也没有 js 错误...我认为没有指定任何背景颜色，但 body 标记...该库似乎不需要在 document.ready 上初始化要么......（叹气）还有 2 天的谜题要解开。
没有 parallax-mirror 类的 div 将指向未执行的 javascript...

标签： jquery css parallax.js

【解决方案1】：

你需要如下设置

.parallax-mirror {
    z-index:1
}

【讨论】：

.parallax-mirror 元素出现在 body 元素后面。您使用的是 Zurb Foundation CSS 框架吗？

【解决方案2】：

当插件完美运行时图像不显示的另一个问题是父元素的背景颜色。

在我的例子中，它是一个包裹在整个正文内容区域周围的父容器，它有一个background: #fafafa!important

一旦我删除了背景颜色并将其应用于仅需要它的 div，问题就得到了解决，并且视差图像正常工作。

【讨论】：

【解决方案3】：

在默认引导中

body { background-color: #fff; }

改成

body { background-color: transparent; }

它会起作用的。

【讨论】：

【解决方案4】：

尝试将属性data-img-src 更改为data-src。

这解决了我的问题。

【讨论】：