css实现网页背景图片自适应全屏

CSS实现网页背景图片自适应全屏,可以让网页背景更加美观,使整个网页更加具有吸引力。

css实现网页背景图片自适应全屏

以下是实现背景图片自适应的CSS代码

body { 
    background: url(图片地址) no-repeat center center fixed; 
    -webkit-background-size: cover; /* Safari 和 Chrome */ 
    -moz-background-size: cover; /* Firefox */ 
    -o-background-size: cover; /* Opera */ 
    background-size: cover; /* 其他浏览器 */ 
}

通过设置背景图片的地址,然后使用CSS中的background属性,将背景设置为该图片,no-repeat保证图片不重复,center center保证图片居中显示,fixed属性图片随着页面滚动而不移动。

为了使图片自适应全屏,需要使用background-size属性。-webkit-、-moz-、-o-、background-size分别是兼容Safari、Chrome、Firefox和Opera浏览器的写法,最后的background-size设置则是适用于其他浏览器的写法。cover则是让图片自动缩放以填满整个容器,直到连续完整显示整个图片为止。

通过使用以上CSS代码,就可以实现网页背景图片自适应全屏的效果了。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效