html – Fullpage.js背景图片
发布时间:2020-12-14 18:38:53 所属栏目:资源 来源:网络整理
导读:我刚开始使用fullpage.js库(?),我想知道如何将背景图像添加到一个部分.我已经尝试在该部分中添加一个新的div,并在该部分添加一个新类但无济于事. 请帮忙! HTML div class="section bg" id="section0"h1Section/h1/divdiv class="section" id="section1"div
我刚开始使用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; } 解决方法
你需要使用CSS.对每个部分使用和id,并为其添加相应的样式.
它已经在github问题上得到了处理: 在这里你有官方演示或它: (你可以在页面源代码中看到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; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |