0

我正在尝试为网站编写一个简洁的小着陆页。我有一张出色的 1920x1080 图像，中间有一个很好的开放空间，非常适合放入内容。

我正在使用该background-size: cover;属性来确保我的背景可以很好地缩放并且永远不会出现扭曲，但是由于背景大小的奇怪机制，当屏幕重新调整大小时，我无法弄清楚如何将页面内容与背景对齐： 覆盖。

我创建了一个示例页面来说明我的意思：http ://umwh.at/test.html 。在 1920x1080 中查看，内容或多或少与背景图像完美对齐，但按比例缩小时，它根本无法正常工作。

所以，事不宜迟，我的问题是：是否有可能使用纯 CSS 来实现这一点？

（旁注：我在这里有一个使用 javascript 的解决方案（警告，大图），但有人告诉我这不是正确的方法，但我无法找到另一种方法）。

4

1 回答 1

0 
body {
    background: #EEE url('../img/test.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

参考： http : //css-tricks.com/perfect-full-page-background-image/
演示：http ://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

于 2013-08-19T07:39:03.400 回答