Question

我正在尝试为网站编写一个简洁的小页面。我有一个优秀的1920x1080图像，中间有一个很好的开放空间，完美用于放入内容。

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

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

所以，不用多说，我的问题是：是否可以使用纯CSS来实现这一目标？

（旁注：我有一个使用javascript here (Warning, large image)的解决方案，但我被告知这不是正确的方法，但我还没有找到另一种方式。）

Answer 1

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

使用background-position定位内容相对于背景：封面

1 个答案: