html - 背景大小：覆盖不缩放 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-attachmentbackground

改变：

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-positionand background-attachment withbackground-size : cover是违反直觉的，你告诉浏览器在那里做两件不同的事情，而且现代浏览器似乎仍然默认使用旧方法而不是新方法。

有关background-size查看 MDN 文档的注意事项的更多信息：https ://developer.mozilla.org/en-US/docs/CSS/background-size