7

我刚刚开始使用 fullpage.js 库（？）并且想知道如何将背景图像添加到部分。我尝试在该部分中添加一个新的 div 并在该部分中添加一个新类，但无济于事。请帮忙！

HTML 

<div class="section bg" id="section0"><h1>Section</h1></div>
<div class="section" id="section1">
<div class="slide active"><div class="wrap"><h1>Hello fullPage.js</h1></div></div>
<div class="slide"><h1>This is an awesome plugin</h1></div>
<div class="slide"><h1>Which enables you to create awesome websites</h1></div>
<div class="slide"><h1>In the most simple way ever</h1></div>
</div>
<div class="section" id="section2"><h1>Just testing it</h1></div>
<div class="section" id="section3"><h1>Looks good</h1></div>


</body>

CSS（我在标准之上的自定义 CSS）

.bg {
    background: url(../img/Blurred%20Backgrounds%20(13).jpg) no-repeat center center        fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
4

2 回答 2

8

您需要为此使用 CSS。对每个部分使用 and 并id为其添加相应的样式。

它已在 github 问题上得到处理： https ://github.com/alvarotrigo/fullPage.js/issues/6

在这里你有官方演示或它： http ://alvarotrigo.com/fullPage/examples/backgrounds.html#

（您可以在页面源代码中看到 CSS 样式）

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

/* Defining each sectino background and styles 
* --------------------------------------- */
#section0{
    background-image: url(imgs/bg1.jpg);
    padding: 30% 0 0 0;
}
#section2{
    background-image: url(imgs/bg3.jpg);
    padding: 6% 0 0 0;
}
#section3{
    background-image: url(imgs/bg4.jpg);
    padding: 6% 0 0 0;
}
#section3 h1{
    color: #000;
}


/*Adding background for the slides
* --------------------------------------- */
#slide1{
    background-image: url(imgs/bg2.jpg);
    padding: 6% 0 0 0;
}
#slide2{
    background-image: url(imgs/bg5.jpg);
    padding: 6% 0 0 0;
}
于 2013-11-21T11:00:05.750 回答
2

我在 body CSS 中处理了它：

body{
background:url("../img/background.jpg") center top no-repeat; 
background-position: fixed;
background-color: #000000;
}

您也可以通过.section类似的样式来做到这一点，或者使用id每个部分的样式来设置：

.section{
background:url("../img/background.jpg") center top no-repeat; 
background-position: fixed;
background-color: #000000;
}

--OR--

#id{
background:url("../img/background.jpg") center top no-repeat; 
background-position: fixed;
background-color: #000000;
}
于 2013-11-21T02:26:13.697 回答