Firefox 中的 CSS Parallax Backgrpund 标头答案

【问题标题】：CSS Parallax Backgrpund Header in FirefoxFirefox 中的 CSS Parallax Backgrpund 标头
【发布时间】：2014-10-01 21:14:04
【问题描述】：

我已经为仅使用 CSS 的视差背景标题编写了一个小实验：http://codepen.io/Kageetai/pen/yIdAq?editors=110

它在 Chrome 中运行良好，但在 Firefox 中，标题有一个奇怪的行为，即使 Codepen 使用 -prefix-free。背景图片在向下滚动一点后自动推到下面的内容之上。

它使用了这里找到的技术，我认为这非常优雅。所以我复制了大部分内容并想将其应用于标题。

我想这与那部分有关，主要是导致视差发生：

.parallax {
  position: relative;
  //padding: 25vh 10%;
  padding: 0.1px; // strange behaviour with padding 0
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  transform-style: inherit;
  background: 50% 50% / cover; 

   &:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    background: 50% 50% / cover; 
  }
}

header {
  text-align: center;
  color: whitesmoke;

  &:before {
    background-image: url(http://www.theloftberlin.com/wp-content/uploads/2013/09/2013-berlin.jpg) !important;
  transform: translateZ(-1px) scale(2);
  z-index:-1;
  }
}

此外，固定导航在 Chrome 和 Firefox 上根本不固定。

有人有什么想法吗？谢谢！

【问题讨论】：

标签： css parallax

【解决方案1】：

将position:relative 添加到您的#wrapper，这将修复文本上的图像重叠问题。

【讨论】：

完美，没想到这么简单:)

【解决方案2】：

将z-index="2" 添加到.nav

在此处查看代码笔Code pen

【讨论】：

对于我忘记添加 z-index 的 codepen，但我还在 Firefox 中发现了另一个问题，你的导航没有保持固定
导航不固定是我的意思。另一个由第一个答案固定....
嘿，我又回到了那个问题，并且仍在尝试修复 Firefox 中的奇怪行为。有人有想法吗？
它现在可以在Firefox中使用，但是视差效果无处不在