CSS3实现完美background-img

发表于

一张图填充整个页面，而且不会有任何空白区产生；
背景图片能根据显屏进行缩放；
背景图片缩放时以保留图像的比例（宽高比）；
背景图片保持在页面的中心位置处；
不会给页面造成滚动条的出现；
以实现各浏览器的兼容性问题；

CSS3提供了一个属性background-size只要把背景图片放在<HTML>元素中，然后设置背景图片以固定方式显示就可以。

因为<HTML>元素的高度总是和浏览器的高度一致

1
2
3
4
5
6
7
html {
      background: url(images/perfect-full-page-bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
		}