CSS完美全屏图像背景

Question

我想知道如何让背景图片适应每个屏幕和浏览器，并且不会被裁剪。我发现大多数技术都会略微裁剪图片。 我知道有很多技术可以实现这一点，但我想知道你认为哪种最好。 谢谢！

- alexandru

---

我认为并没有一种万能的解决方案。你的解决方案将大大取决于你的图像长什么样子以及它如何被应用。例如，许多背景图像在图像中心留下一个宽度等于其内容区域的大间隙。而其他背景图像则透过内容区域显示。有些会重复。背景图像有几种技术，但具体取决于设计。 - Jared

使用jQuery方法实现完美的全屏背景图像可能是最佳解决方案。 - easwee

Answer 1

这篇CSS-tricks.com的文章涵盖了全屏背景图像的不同技术，并包括旧版本IE的回退方案（我没有测试过IE修复程序）。

当我不需要考虑支持旧版浏览器时，我通常使用CSS3方法：

html { 
    background: url(http://lorempixum.com/1440/900/sports)
        no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

- DuMaurier

---

我知道这种方法很老了，但是有没有一个好的替代方案，它不会随着浏览器的大小而调整大小？希望我能只给图片设置最小高度。 - Phillip Schmidt

Answer 2

将此代码添加到 body 标签内：

<img src="img/beach.jpg" 

style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">

http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.htmlg

- Tony Wu