背景圖想設置圖片,怎么實現
背景圖想設置圖片
慕慕6649544
2016-02-16
2 回答
舉報
0/150
提交
取消
背景圖想設置圖片
2016-02-16
舉報
2017-03-03
<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" /> ??
? ? <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>
2016-02-17
backgroud:url