为什么background-attachment: fixed使background-size:cover根据窗口比例调整大小？

Question

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

这是一个显示问题的小提琴。只需在CSS上切换第13行的commend。当您更改为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; */
}

background-默认情况下附件是'scroll‘。所以用' fixed‘注释掉猫图片，将猫图片调整到左上角方框的形状没有问题，但用'fixed’时，猫背景会固定在页面上，但猫图片的大小会“覆盖”整个页面。

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

但是标题设置为页面高度的50%。它在这个例子中是有效的，因为标题是整页的。

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

Answer 1

这是因为设置background-attachment: fixed会将背景定位区域更改为初始包含块的背景定位区域，该区域始终为视口的大小。从spec

如果此图像的‘background -attachment’值为‘fixed’，则‘background-origin’属性不起作用:在这种情况下，背景定位区域为initial containing block CSS21。

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

您可以通过设置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声明移到了底部，以确保所有浏览器都在可用的非标准实现上使用该声明。

Answer 2

background-size: 25%；background-attachment:固定；background-position: center 300px；background-repeat:不重复；

到目前为止，它正在做我需要它做的事情。