背景大小：覆盖不在div中缩放图像

Question

我有四个同样大小的div设置如下：

<div id="top-left"></div>
<div id="top-right"></div>
<div id="bottom-left"></div>
<div id="bottom-right"></div>

每个都是页面宽度的50％并且绝对定位。像这样，例如：

#top-right {
position: absolute;
top: 0px;
left: 50%;
width: 50%;
height: 50%;
}

问题是当我尝试通过CSS3封面缩放（大）背景图像时。这是我到目前为止的背景图像css：

background: #000 url('DSC01992.jpg') center center fixed no-repeat;
background-size: cover;
-moz-background-size: cover;
-o-(etc.)

以下是一个实例：http://jsfiddle.net/TqQv7/

如果您在此处打开占位符图片：http://placekitten.com/2000/1000，您会看到图片未正确缩放。

我错过了什么吗？

Answer 1

删除简写background-position声明中的background-attachment和background部分会为您提供所需的结果。

变化：

background: #000 url('http://placekitten.com/2000/1000') center center fixed no-repeat;

致：

background: #000 url('http://placekitten.com/2000/1000') no-repeat;

以下是演示：http://jsfiddle.net/TqQv7/1/

使用 background-position和 background-attachment以及background-size : cover是非直观的，你告诉浏览器在那里做两件不同的事情，似乎现代浏览器仍然默认使用旧方法而不是新方法。

有关background-size签出MDN文档的警告的更多信息：https://developer.mozilla.org/en-US/docs/CSS/background-size