Question

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

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

背景附件默认为“滚动”。所以用'fixed'注释掉猫图片大小调整到左上方框的形状没有问题但是'固定'猫背景保持固定在页面上，但猫图片大小然后“覆盖”整个页面。

理想情况下，我想在此处重新创建标题：http://startbootstrap.com/templates/stylish-portfolio/index.html

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

这似乎与标准兼容，因为所有现代浏览器看起来都是这样做但我无法理解它为什么会这样做？

Answer 1

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

如果此图片的'background-attachment'值为'固定'，则['background-origin'属性]无效：在这种情况下，背景定位区域为initial containing block [CSS21]

background-size: cover的行为会因此受到影响。

您可以通过设置background-size: auto 50%来still achieve the desired behavior with a fixed background，因此其高度可以缩放到页面的50％，镜像您给予元素的高度，并且其宽度可以按比例调整：

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

请注意，我还将标准background-size声明移至底部，以确保所有浏览器在非标准实施中使用该声明。

Answer 2

我只是通过更改值使其成为我想要的大小在我想要的地方改变了我的过去：

背景尺寸：25%；背景附件：固定；背景位置：中心 300 像素；背景重复：不重复；

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

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

2 个答案: