WEB前端

CSS3设置背景图片大小 100%全屏拉伸效果

位置:首页 > WEB前端 > css3教程,2016-03-07
CSS3设置背景图片大小 100%全屏拉伸效果,CSS3背景图片满屏拉伸效果


css3全屏背景代码

html{
background:url(‘background.jpg’) no-repeat center center;
min-height:100%;
background-size:cover;
}
body{
min-height:100%;
}

以前flash流行的时候,很多网站都是全屏的,特别是一些个人网站,有很多很酷很炫的效果展示方式,现在HTML5和CSS3的崛起,势必也有这样的网站这么做,最常见的就是全屏背景的设置,无论你的网站的尺寸是多少,背景图总能全屏铺满,而且图片不会拉伸。

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

其实这里用到了css3的background-size属性,这个属性主要用于设置背景图片的大小,有2个可选值,第1个值用于指定背景图的width,第2个值用于指定背景图的height。如果只指定1个值得,则第2个值默认为auto。

background-size:auto (该背景图片为原本图片尺寸的大小)

background-size:100px  50px(该背景图片为设置像素尺寸的大小)

background-size:90%  80%(该背景图片为设置的容器内的百分比的尺寸大小)

background-size:cover(该背景图片为设置的等比扩展填满整个容器的尺寸大小)



TAGS:CSS3背景全屏



猜你喜欢


NewHot手机版