背景图想设置图片,怎么实现
背景图想设置图片
慕慕6649544
2016-02-16
2 回答
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
<meat name="viewport" content="widt=device-width, initial-scale=1,user-scalable=no/">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.3/jquery.fullpage.css"/>
<style>
body{
text-align: center;
}
#header{
border: 10px solid rgb(100,100,100);
font-size: 40px;
text-align: center;
box-shadow: 5px 6px 10px #666;
}
#img1{
background-image: url(img/006.jpg);
background-repeat: no-repeat;
}
#img1 h1{
color:#F8F;
font-family: "幼圆"
}
#img2{
background-image: url(img/001.jpg);
}
#img2 p{
color: #fff;
font-family: "幼圆";
font-size: 30px;
}
#img3{
background-image: url(img/002.jpg);
}
#img3 p{
color: #fff;
font-family: "幼圆";
font-size: 30px;
}
#img4{
background-image: url(img/003.jpg);
}
#img4 p{
color: #fff;
font-family: "幼圆";
font-size: 30px;
}
#img5{
background-image: url(img/004.jpg);
}
#img5 p{
color: #fff;
font-family: "幼圆";
font-size: 30px;
}
#img6{
background-image: url(img/005.jpg);
background-size: 1304px 671px;
}
#img6 h1{
color: #789757;
font-family: "幼圆";
}
#img7{
background-image: url(img/007.jpg);
background-size: 1304px 671px;
}
#img7 h1{
color: #789757;
font-family: "幼圆";
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section" id="img1"><h1>每当努力的成果诞生在眼前时心里是说不完的喜悦的</h1></div>
<div class="section ">
<div class="slide" id="img2"><p>这个是第二屏的第一页</p></div>
<div class="slide" id="img3"><p>这个是第二屏的第二页</p></div>
<div class="slide" id="img4"><p>这个是第二屏的第三页</p></div>
<div class="slide" id="img5"><p>这个是第二屏的第四页</p></div>
</div>
<div class="section" id="img6"><h1>这个是第三屏</h1></div>
<div class="section" id="img7"><h1>这个是第四屏</h1></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['green','orange','pink','red'],
//resize字体是否随着窗口缩放而缩放 默认为false
resize:true
//scrollingSpeed是动画的滑动速度
scrollingSpeed:2000
//loopTop滚动到最底部后是否连续滚动到底部 默认为false
loopTop:true,
//loopBottom滚动到最底部是否连续滚动到最顶部 默认为false
loopBottom:true,
loopHorizontal:false
});
})
</script>
</body>
</html>
举报
0/150
提交
取消
