CSS实现全屏切换效果的示例代码

2024-07-11 09:07:56

字体：大中小

来源：转载

供稿：网友

如何通过CSS使div实现全屏效果，主要分为图片横排展示全屏切换效果和图片竖排展示全屏切换效果，分享给大家，具体如下：

全屏要素

全屏的元素及其父元素都要设置height:100%
将html、body标签设置height:100%

（注：height:100%是跟随其父元素高度变化而变化的）

1.图片横排展示全屏切换效果

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    *{      padding: 0;      margin: 0;    }    html,body{      height: 100%;    }    #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("http://ossweb-img.qq.com/images/lol/web201310/skin/big86000.jpg");    }    #section1{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big11000.jpg");    }    #section2{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big55000.jpg");    }    #section3{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big45000.jpg");    }    .left{      float: left;      width: 25%;    }  </style></head><body>  <div id="container" style="width:400%">    <div class="sections">      <div class="section left" id="section0">        <h3>this is the page</h3>      </div>      <div class="section left" id="section1">        <h3>this is the page</h3>      </div>      <div class="section left" id="section2">        <h3>this is the page</h3>      </div>      <div class="section left" id="section3">        <h3>this is the page</h3>      </div>    </div>  </div></body></html>

2.图片竖排展示全屏切换效果

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    *{      padding: 0;      margin: 0;    }    html,body{      height: 100%;    }    #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("http://ossweb-img.qq.com/images/lol/web201310/skin/big86000.jpg");    }    #section1{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big11000.jpg");    }    #section2{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big55000.jpg");    }    #section3{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big45000.jpg");    }  </style></head><body>  <div id="container">    <div class="sections">      <div class="section" id="section0">        <h3>this is the page</h3>      </div>      <div class="section" id="section1">        <h3>this is the page</h3>      </div>      <div class="section" id="section2">        <h3>this is the page</h3>      </div>      <div class="section" id="section3">        <h3>this is the page</h3>      </div>    </div>  </div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到CSS教程频道。

上一篇：浅谈css sticker-footer 布局

下一篇：用CSS3实现瀑布流布局的示例代码