fullpage.js背景图片没有覆盖

问题描述 投票:1回答:3

我正在使用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;
    }
javascript html css fullpage.js
3个回答
0
投票
#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;
}

0
投票

得到了解决。基本上我改变了:

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

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

0
投票

将以下属性添加到第3部分

#section3{
    width:100%;
    height:100%;
    background-size:100% auto;
    background-repeat: no-repeat;
}
© www.soinside.com 2019 - 2024. All rights reserved.