(注:一下内容是自己通过网络整理出来的,并非完全自己写的)
全屏背景是当下比较流行的一种网页设计风格,而具体的实现这样的全屏背景无外乎基本就两种方法,一种的通过CSS去实现的(CSS3.0为我们提供了更为丰富的CSS样式控制);另一种就是通过我们熟悉的javascript去实现,这里为了代码方便就直接使用jQuery了。既然提到jQuery,我们就可以想象既然我们能用jQuery写了,那网络上就一定有类似的写好的jQuery插件等着我们用了。
方法一、利用CSS3.0样式新特性实现北京全屏(不支持ie6-8)
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
或:
html{
background:url('background.jpg') no-repeat center center;
min-height:100%;
background-size:cover;
}
body{
min-height:100%;
}
原理:将html及body设置为最小高度为100%,使用css3中的background-size:cover;将背景图片设置成封面全屏模式。
兼容性:
Safari 3