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

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

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

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

我遇到问题的代码可以在下面找到，也可以在

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，也不擅长解决任何相关问题。这可以从我编写的CSS代码中很容易看出。我从插件的示例中收集CSS片段，并根据需要调整它们。因此请求StackOverflow社区提供帮助

谢谢

---

Jignesh

我发现了问题。是不正确的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>

第0节内容
第1节幻灯片1内容
第1节幻灯片2内容
第1节幻灯片3内容
第2节内容

那些应该是第0节、第1节、第2节，而不是第0节、第1节、第2节

谢谢， 吉格内斯

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