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

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

.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;
}

Answer 2

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

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

具有固定背景的Div部分未在Firefox中显示

2 个答案: