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社区提供帮助。

谢谢，

Jignesh

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 。

谢谢， Jignesh

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

1 个答案: