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则是让图片自动缩放以填满整个容器,直到连续完整显示整个图片为止。