Question

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

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

它使用了这里发现的技术，我觉得它非常优雅。所以我复制了大部分内容，并希望将其应用于标题。

我认为它与该部分有关，主要是使视差发生：

.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上根本没有修复。

任何想法？谢谢！

Answer 1

将position:relative添加到 #wrapper ，以修复文字上图片的重叠。

Answer 2

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

在此检查代码集Code pen

Firefox中的CSS视差背景标题

2 个答案: