Div Firefox 中没有显示固定背景的部分

Question

具有固定背景的 div 在 Safari 和 Chrome 中显示良好，但在 Firefox 中显示不佳。我试图找出原因但没有运气。谢谢指教！

HTML

<div class="fixed-section fixed-bg-1">
  <div class="overlay"></div>
</div>

CSS

.fixed-section {
    min-height: 50%;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

.fixed-section.fixed-bg-1 {
    background-image: url("../images/slider-00.png");
}
.overlay {
    background: transparent url("../images/overlays/overlay-01.png"); 
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    top: 0; 

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 1

您的叠加层中有 2 个 z-index 属性。很可能有人 Safari/Chrome/Firefox 以不同的顺序阅读它们。

例如： Safari/Chrome - z-index:0 然后 z-index:3 Firefox- z-index:3 然后 z-index: 0

Answer 2

将 height:50%; 添加到您的固定部分 class 以及您的最小高度，如下所示：

.fixed-section {
    height: 50%;
    min-height: 50%;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

Div Firefox 中没有显示固定背景的部分

Div section with fixed background not showing in Firefox

html

css

firefox