現(xiàn)在很多網(wǎng)站為了美觀大方，首頁都會顯示一張大圖來作為背景，不管屏幕多大，都會做到100%的適應(yīng)，那么這樣一個效果是如何來實現(xiàn)的呢？
實現(xiàn)全屏要素，全屏的元素及其父類元素都要設(shè)置<b>height:100%</b>;將<b>html,body</b>標(biāo)簽設(shè)置成<b >100%</b>。
注：height:100%是根據(jù)其父類高度變化而變化的。
我們來看一個例子：
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../js/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html,body{
height: 100%;
/* overflow: hidden;*//*上下全屏滑動*/
}
h3{
padding: 0;margin: 0;
}
#container,.sections,.section{
height: 100%;
}
#section0,#section1,#section2,#section3{
background-color: #000;
background-size: cover;
background-position: 50% 50%;
text-align: center;
color: white;
}
#section0{
background-image: url("images/section0.jpg");
}
/*#section1{
background-image: url("images/section1.jpg");
}
#section2{
background-image: url("images/section2.jpg");
}
#section3{
background-image: url("images/section3.jpg");
}*/
/*.left{
float: left;
width: 25%;
}*/
</style>
</head>
<body>
<div id="container" data-pageSwitch>
<div class="sections ">
<div class="section left" id="section0">
<h3>This is a full screen slide.</h3>
</div>
<!--<div class="section left" id="section1">
<h3>This is anther page.</h3>
</div>
<div class="section left" id="section2">
<h3>This is anther page.</h3>
</div>
<div class="section left" id="section3">
<h3>This is anther page.</h3>
</div>-->
asadsad
asdsadsa
</div>
</div>
</body>
</html>
開發(fā)中的效果如下：
Screenshot.png
當(dāng)然，這樣只是簡單地實現(xiàn)了全屏的效果，細(xì)節(jié)并沒有進行相關(guān)的處理，比如為了讓背景圖不變形，可以使用CSS3的相關(guān)屬性完成類似裁剪的效果，這次再詳細(xì)來敘述這一點。
