html - 背景尺寸 : cover not scaling image in 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 声明的 background-position 和 background-attachment 部分将为您提供所需的结果。

改变:

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