如何实现首页全屏的效果？

现在很多网站为了美观大方，首页都会显示一张大图来作为背景，不管屏幕多大，都会做到100%的适应，那么这样一个效果是如何来实现的呢？

实现全屏要素，全屏的元素及其父类元素都要设置height:100%;将html,body标签设置成100%。
注：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的相关属性完成类似裁剪的效果，这次再详细来叙述这一点。

如何实现首页全屏的效果？

推荐阅读更多精彩内容