Question

我正在使用带有背景图片的fullpage.js，但问题是它们没有在页面加载时自动调整大小。它们仅在缩放浏览器时调整大小以覆盖背景，onload它们看起来非常大，裁剪并固定到上部顶部。有人有这个问题吗？我正在使用Chrome。

<div id="fullpage">
        <div class="section " id="section0">

            <div id="mainTourNav" class="container">
                <ul>
                    <li id="tourNav1"><a href="#"></a> </li>
                    <li id="tourNav2" class="tourNav"><a  href="#"> Slide 1</a></li>
                    <li id="tourNav3" class="tourNav"><a  href="#"> Slide 2 </a></li>
                    <li id="tourNav4" class="tourNav"><a  href="#"> Slide 3 </a></li>
                </ul>
            </div>
        </div>
        <div class="section" id="section1">
            <h1>It’s about Friends and Family. . .</h1>

        <div class="section" id="section2">
            <h1>It's about design. . .</h1>


        </div>
        <div class="section" id="section3">
            <h1>It’s about the game you love. . .</h1>

        </div>
    </div>

CSS

/* Backgrounds will cover all the section
    * --------------------------------------- */
    #section0,
    #section1,
    #section2,
    #section3{
        background-size: cover;
    }

    /* Defining each section background and styles
    * --------------------------------------- */
    #section0{
        background-image: url(../img/Res-BG.jpg);
        padding: 15% 0 0 0;
    }
    #section1{
        background-image: url(../img/bg4.jpg);
        padding: 10% 4% 0 4%;
    }
    #section2{
        background-image: url(../img/bg3.jpg);
        padding: 10% 4% 0 4%;
    }
    #section3{
        background-image: url(../img/bg2.jpg);
        padding: 10% 4% 0 4%;
    }
    #section0 h1{
        color: black;
        font-size: 40px;
        font-style: italic;
        opacity: 0;
    }

Answer 1

#section{
    background-image: url('http://www.fhdwallpapers.com/upload/2013/04/13/20130413064705-280c35c7.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

Answer 2

解决了。基本上我一直在变：

#section0,
    #section1,
    #section2,
    #section3{
        background:cover;
    }

到

#section0,
    #section1,
    #section2,
    #section3{
        width:100%;
            height:100%;
            background-size:100% auto;
            background-repeat: no-repeat;
    }

Answer 3

将Follwing属性添加到第3节

Option Explicit
Public WithEvents Chk As MSForms.CheckBox

Private Sub Chk_Change()
    If Chk Then
        .ChkCount = .ChkCount + 1
    Else
        .ChkCount = .ChkCount - 1
    End If
End Sub

fullpage.js背景图片没有覆盖

3 个答案: