html如何实现全屏切换,CSS实现全屏切换效果的示例代码

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

全屏要素

全屏的元素及其父元素都要设置height:100%

将html、body标签设置height:100%

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

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

Document

*{

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%;

}

this is the page

this is the page

this is the page

this is the page

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

Document

*{

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");

}

this is the page

this is the page

this is the page

this is the page

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