为什么背景附件:固定使背景大小:封面大小调整为窗口比例？

Question

如果您希望标题图像调整大小以覆盖整个标题但又希望修复背景附件,则背景图像将不再覆盖包含div但将尝试覆盖整个窗口.

这是一个显示问题的小提琴.只需切换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; */
}

background-attachment默认为'scroll'.因此,通过"固定"注释,猫图片大小调整为左上方框的形状没有问题但是"固定"猫背景保持固定到页面但猫图片大小则"覆盖"整个页面.

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

但是标题设置为页面高度的50%.它在此示例中有效,因为标题是整页.

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

Answer 1

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

如果此图像的"背景附件"值为"固定",则[背景原点]属性无效:在这种情况下,背景定位区域是包含块 [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声明移到了底部,以确保所有浏览器在非标准实现中使用该声明.