fullpage.js - 渐变背景不适用于没有幻灯片的部分

Question

我需要帮助来解决我在使用 fullpage.js 插件创建带有渐变背景的静态 HTML 页面时遇到的问题。

问题是当使用Gradient Backgrounds 中演示的渐变背景时，渐变样式会正确应用于嵌套在某个部分下的幻灯片，但是没有任何幻灯片的部分显示白色背景。

我尝试删除我添加的自定义 CSS 样式并调试插件的 Javascript 源代码，但找不到所面临问题的根本原因。最终我在存储库中打开了一个 issue 以寻求插件作者的相同帮助但是他回答说这看起来像 CSS 问题，插件没有问题，因为演示页面正在运行。

我遇到问题的代码可以在下面找到，也可以在http://codepen.io/jigneshgohel/pen/vrxuz找到

HTML

<div id="header">
    <ul id="menu">
        <li data-menuanchor="section1"><a href="#section1">Section1</a></li>
        <li data-menuanchor="section2"><a href="#section2">Section2</a></li>
    </ul>

    <div id="logo">
        <a href="#section0">
            <img width="200" height="40" alt="logo" src="css/imgs/logo.jpg" />
        </a>
    </div>
</div>

<div id="footer">Footer</div>

<div id="content">
    <div class="section" id="#section0">
        Section 0 Content
    </div>
    <div class="section" id="#section1">
        <div class="slide" id="slide1">
            Section 1 Slide 1 Content
        </div>
        <div class="slide" id="slide2">
            Section 1 Slide 2 Content
        </div>

        <div class="slide" id="slide3">
            Section 1 Slide 3 Content
        </div>
    </div>
    <div class="section" id="#section2">
        Section 2 Content
    </div>

</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="http://cdn.jsdelivr.net/jquery.fullpage/2.4.1/jquery.fullPage.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.fullpage/2.4.1/vendors/jquery.easings.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.fullpage/2.4.1/vendors/jquery.slimscroll.min.js"></script>

<script type="text/javascript">
    $('#content').fullpage({
        anchors: ['section0', 'section1', 'section2'],
        //sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
        css3: true,
        scrollOverflow: true
    });
</script>

自定义 CSS

/* Custom Styles */

#menu li {
    display:inline-block;
    margin: 10px;
    color: #000;
    background:#fff;
    background: rgba(255,255,255, 0.5);
    -webkit-border-radius: 10px;
            border-radius: 10px;
}
#menu li.active{
    background:#666;
    background: rgba(0,0,0, 0.5);
    color: #fff;
}
#menu li a{
    text-decoration:none;
    color: #000;
}
#menu li.active a:hover{
    color: #000;
}
#menu li:hover{
    background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
    padding: 2px 18px;
    display:block;
}
#menu li.active a{
    color: #fff;
}
#menu{
    position:fixed;
    top:0;
    left:0;
    height: 40px;
    z-index: 70;
    width: 80%;
    padding: 19px;
    margin:0;
}

/* Centered texts in each section
* --------------------------------------- */
.section{
    text-align:center;
}

/* Fixed header and footer.
* --------------------------------------- */
#header, #footer{
    position:fixed;
    /*height: 50px;*/
    display:block;
    width: 100%;
    background: #333;
    z-index:9;
    text-align:center;
    color: #f2f2f2;
    padding: 20px 0 0 0;
}

#header{
    top:0px;
    height: 60px;
    text-align: left;
}
#footer{
    bottom:0px;
    height: 60px;
}

#logo {
    position: relative;
    left: 80%;
    height: 40px;
    z-index: 70;
    width: 20%;
}

#logo a{
    text-decoration:none;
    color: #000;
    padding: 2px 18px;
    display:block;
}
#logo a:hover{
    color: #000;
}

#logo a img {
    max-width: 100%;
}

/* Defining each section background and styles
* --------------------------------------- */
#section0{
    background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe));
    background: -webkit-linear-gradient(#4BBFC3, #7BAABE);
    background: linear-gradient(#4BBFC3,#7BAABE);
}

#section2 {
    background: -webkit-gradient(linear, top left, bottom left, from(#969ac6), to(#636F8F));
    background: -webkit-linear-gradient(#969AC6, #636F8F);
    background: linear-gradient(#969AC6,#636F8F);
}

/*Adding background for the slides
* --------------------------------------- */
#slide1{
    background: -webkit-gradient(linear, top left, bottom left, from(#7baabe), to(#969ac6));
    background: -webkit-linear-gradient(#7BAABE, #969AC6);
    background: linear-gradient(#7BAABE,#969AC6);
}

#slide2{
    background: -webkit-gradient(linear, top left, bottom left, from(#92a1ca), to(#76c2bd));
    background: -webkit-linear-gradient(#92a1ca, #76c2bd);
    background: linear-gradient(#92a1ca,#76c2bd);
}

#slide3{
    background: -webkit-gradient(linear, top left, bottom left, from(#92a1ca), to(#76c2bd));
    background: -webkit-linear-gradient(#92a1ca, #76c2bd);
    background: linear-gradient(#92a1ca,#76c2bd);
}

我不擅长使用 CSS，也没有解决任何相关问题。这可以从我编写的 CSS 代码中轻松看出，我通过从插件示例中收集点点滴滴的 CSS 并根据我的需要进行调整。因此向 StackOverflow 社区请求帮助。

谢谢，

吉格尼什

Answer 1

我找到了问题。是不正确的 DIV id 导致了问题。

<div id="content">
    <div class="section" id="#section0">
        Section 0 Content
    </div>
    <div class="section" id="#section1">
        <div class="slide" id="slide1">
            Section 1 Slide 1 Content
        </div>
        <div class="slide" id="slide2">
            Section 1 Slide 2 Content
        </div>

        <div class="slide" id="slide3">
            Section 1 Slide 3 Content
        </div>
    </div>
    <div class="section" id="#section2">
        Section 2 Content
    </div>

</div>

应该是 section0, section1, section2，而不是 #section0, #section1, #section2。

谢谢， 吉格尼什