CSS3 背景图像：居中且固定大小

Question

我的背景图像有问题。

我有一个大小为 2538 x 559px 的图像，无论窗口分辨率或大小如何，它都应该居中。背景图像应该有一个固定的大小，它不能缩放。在图像的中间是特定位置的文本形式，这就是图像不能缩放的原因。

如果我们有一个小的分辨率或者如果窗口变小，中心仍然应该是可见的，并且应该左右剪切图像。

我尝试了很多我浏览和发现的东西，但没有任何帮助。你能帮我么？

非常感谢！

Answer 1

您必须将 设置background-position为百分比：

body
{
    height: 100%;
    width: 100%;
    background: url('path/to/file.png') no-repeat;
    background-position: 50% 50%;
    background-size: 1920px 1200px;
}

这确保它将占用容器宽度的百分比并始终将其显示在中心，切割图像的左侧和右侧。

要始终保持 bg 图像的大小相同，您应该使用该 background-size:属性。

请注意，这是一个 CSS3 属性，IE<9 将不支持它。

http://jsfiddle.net/Kyle_Sevenoaks/QY5NQ/