视差功能-Html/Css

我正在我的个人网站上工作

我不明白为什么视差功能的图像没有出现在除了chrome浏览器之外的任何东西上

例如，在我的手机上它不工作，在safari浏览器上它不工作

所有东西都贴上了正确的标签

我已将引导添加到该文件中

问题: 预期结果：

此解决方案解决了Safari的问题，但没有解决移动问题

Html:

---

可悲的是，我的名声太小，无法将此作为评论发布到它所属的地方，所以我将仅将其作为一个答案发布。 看看，一个HTML5支持表。我怀疑使用em和css的组合

class="body flex flex-horizontal-center flex-direction-col container"

---

是你问题的原因。

我认为它在Safari上不起作用&在你的手机上，因为你使用的是背景的速记。有些浏览器并不完全支持它
如果您拆分属性，它可能会起作用。

以前的：

background: url("../images/IMG_UnicornCoders.jpeg") no-repeat fixed 50%;

之后：

background: 50% url("../images/IMG_UnicornCoders.jpeg") no-repeat;
background-attachment: fixed;

背景尺寸：封面

---

解决问题。问题是图像在所有屏幕尺寸下的大小都不合适

请在此处添加有意义的代码和问题描述。不要只是链接到需要修复的站点——否则，一旦问题解决或者你链接到的站点无法访问，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”@j08691，好的，我已经更新了我的问题。谢谢你，所以。。。我试着摆脱了“flex水平中心和flex方向柱”，现在它似乎在Safari上起作用了。Html:

但是它在移动设备上仍然不起作用。移动Safari通常使用较旧版本的WebKit（渲染引擎），而移动chrome使用较新的版本，移动chrome beta版通常是最新和最好的。如果对mobile Safari的支持不是至关重要的，我就拭目以待。感谢您提供的信息，很难让每台设备都可用/看起来很好。

class="body flex flex-horizontal-center flex-direction-col container"

background: url("../images/IMG_UnicornCoders.jpeg") no-repeat fixed 50%;

background: 50% url("../images/IMG_UnicornCoders.jpeg") no-repeat;
background-attachment: fixed;

/* Start Parallax */
/* Index */
.parallax{
    width: 100%;
    height: 50%;
    opacity: 0.8;
    background: url("../images/IMG_UnicornCoders.jpeg") no-repeat;
    background-attachment: fixed;
    background-size: cover;
}