javascript - fullPage.js、背景和 div 无法正常工作

Question

我正在尝试更改第一部分的背景，并在该部分内包含两个全尺寸 div。背景不会显示，只有一半的其他 div 会显示，其他一切都是白色的。

HTML:

<div class="section" id="section0">
    <div class="intro">
        <div class="bg"></div>
        <div class="bg hidden"></div>
        <div class="introtext">
            <h1></h1>
            <h2></h2>
        </div>
    </div>
</div>

CSS:

.bg {
  opacity:0.5;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 5s;
  -moz-transition: opacity 5s;
  transition: opacity 5s;
}

.hidden { opacity: 0; margin-top:-50%;}

#section0 {

    background-image:url(img/1.jpg);
    margin: 0;
    width:100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

如果您需要更多信息，请写信，如果有人能解决，将永远感激不尽。

Answer 1

从 .bg css 中删除 position: absolute;

此外，浏览器不尊重百分比的高度 height: 100% 您必须将一些内容添加到您的 div 中或通过设置最小高度或最大高度来设置以像素为单位的高度，例如:min-height: 100px;

这是一个fiddle