教程英文原版https://css-tricks.com/perfect-full-page-background-image/

我们的目标是让一张背景图能够覆盖整个浏览器窗口，在做之前，先提一下对最后效果的要求：

1. 图片要填充整个窗口，没有边距；
2. 根据需要缩放图片
3. Retains image proportions (aspect ratio)[保持图像的比例（纵横比）]
4. 图片居中于页面
5. 不要造成任何scrollbar
6. 尽可能多的浏览器兼容
7. Isn’t some fancy shenanigans like Flash

使用 CSS3 中的 background-size 属性，我们可以以纯CSS的方式来实现这个效果。我们将使用HTML元素（而不是 body，因为它的高度经常会比浏览器窗口的高度低）。我们在其上设置一个固定居中的背景，然后设置 background-size 属性为cover来调整它的大小。

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，我们可以设置透明的文字来达到一种不错的效果

Architecture
...   

对于让IE如何更好的实现这个效果原文中有一些讨论，这里就不在赘述

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！