如何实现首页全屏的效果？
2016-08-08 本文已影响0人
lMadman
现在很多网站为了美观大方，首页都会显示一张大图来作为背景，不管屏幕多大，都会做到100%的适应，那么这样一个效果是如何来实现的呢？
实现全屏要素，全屏的元素及其父类元素都要设置<b>height:100%</b>;将<b>html,body</b>标签设置成<b >100%</b>。
注：height:100%是根据其父类高度变化而变化的。
我们来看一个例子：
<!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>
开发中的效果如下：
Screenshot.png
当然，这样只是简单地实现了全屏的效果，细节并没有进行相关的处理，比如为了让背景图不变形，可以使用CSS3的相关属性完成类似裁剪的效果，这次再详细来叙述这一点。
