我刚开始使用fullpage.js库(？),我想知道如何将背景图像添加到一个部分.我已经尝试在该部分中添加一个新的div,并在该部分添加一个新类但无济于事.
请帮忙！
请帮忙！
<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;
}
解决方法
你需要使用CSS.对每个部分使用和id,并为其添加相应的样式.
它已经在github问题上得到了处理：
https://github.com/alvarotrigo/fullPage.js/issues/6
在这里你有官方演示或它：
http://alvarotrigo.com/fullPage/examples/backgrounds.html#
/* 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;
}
