fullpage.js怎么设置背景图

JavaScript036

fullpage.js怎么设置背景图,第1张

目的: 设置背景图

工具: fullpage.js

引用:

<script src="jquery-1.8.3.min.js"></script>    

<script src="jquery.fullPage.min.js"></script>

参考代码:

<html lang="zh-CN">    

<head>    

<meta charset="utf-8">    

<title>fullPage.js — 背景演示_dowebok</title>    

<link rel="stylesheet" href="css/jquery.fullPage.css">    

<style> 

/*设置不同的背景图片*/   

.section { text-align: center font: 50px "Microsoft Yahei" color: #00ff00}    

.section1 { background: url(images/bg1.jpg) 50%}    

.section2 { background: url(images/bg2.jpg) 50%}    

.section3 { background: url(images/bg3.jpg) 50%}    

.section4 { background: url(images/bg4.jpg) 50%}    

</style>    

<script src="jquery-1.8.3.min.js"></script>    

<script src="jquery.fullPage.min.js"></script>    

<script>  

//执行滚动事件,加载不同的背景图片  

$(function(){    

$('#dowebok').fullpage()    

})    

</script>    

</head>    

<body>    

<div id="dowebok">    

<div class="section section1">欢迎来到我的空间</div>    

<div class="section section2">在这里我将展示不同以往的一面</div>    

<div class="section section3">展示我的知识</div>    

<div class="section section4">也展示我的青春</div>    

</div>    

</html>

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>html{width:100%     height:100%}body{width:100%     height:100%    background: url(../1.jpg) no-repeat    background-size:cover     /*这里设置了背景图片为覆盖，以填满整个容器*/   }</style></head> <body></body></html>