css - 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。

谢谢，吉涅什