html - 为什么后台附件: fixed make background-size:cover resize to the window proportions?

Question

如果您想要调整大小以覆盖整个标题的标题图像，但也希望固定背景附件，则背景图像将不再覆盖包含的 div，而是会尝试覆盖整个窗口。

这是一个显示问题的 fiddle 。只需在 CSS 上切换第 13 行的命令即可。当您更改为 http://jsfiddle.net/TqQv7/155/

#top-left {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 50%;
    background: #000 url('http://placekitten.com/2000/1000') no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-color: transparent;
    /* background-attachment: fixed; */
}

背景附件默认为“滚动”。因此，在注释掉“固定”的情况下，猫图片的大小会毫无问题地调整为左上角框的形状，但在“固定”的情况下，猫的背景会固定在页面上，但猫图片的大小会“覆盖”整个页面。

理想情况下，我想在这里重新创建 header :http://startbootstrap.com/templates/stylish-portfolio/index.html

但页眉设置为页面高度的 50%。它在此示例中有效，因为页眉是整页。

这似乎与标准兼容，因为所有现代浏览器似乎都在做同样的事情，但我不明白为什么会这样？

Answer 1

这是因为设置 background-attachment: fixed 将背景定位区域更改为初始包含 block 的区域，它始终是视口(viewport)的大小。来自spec :

If the ‘background-attachment’ value for this image is ‘fixed’, then [the ‘background-origin’ property] has no effect: in this case the background positioning area is the initial containing block [CSS21].

background-size: cover 的行为会相应地受到影响。

您可以 still achieve the desired behavior with a fixed background通过设置 background-size: auto 50% 代替，所以它的高度缩放到页面高度的 50%，镜像你给元素的高度，它的宽度调整比例:

-moz-background-size: auto 50%;
-webkit-background-size: auto 50%;
-o-background-size: auto 50%;
background-size: auto 50%;

请注意，我还将标准 background-size 声明移到了底部，以确保所有浏览器都在可用的非标准实现上使用该声明。