背景附件：滚动和背景大小：封面不起作用答案

【问题标题】：background-attachment:scroll and background-size:cover not working背景附件：滚动和背景大小：封面不起作用
【发布时间】：2014-09-19 18:09:49
【问题描述】：

我有一个背景图像，我想将其固定在较大的屏幕上并在较小的设备上滚动。

这很好用...

#main_page {
    height: 100%;
    min-height: 100%;
    background-image:url('url');
    background-position: 50% 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

但是我希望能够使用...

@media (max-width: 991px) {
    #main_page { background-attachment:scroll; }
}

使用background-attachment:scroll 似乎会杀死background-size:cover 并以全尺寸显示（我认为更大）。当我在第一组 CSS 中测试 background-attachment: scroll; 时，它会做同样的事情。

这个确切的东西似乎在这个网站上工作......http://www.julytalk.com/我错过了什么？

【问题讨论】：

旁注：背景大小不需要加前缀AFAIK

标签： css background-image background-attachment

【解决方案1】：

我想我明白你的意思了。如果#main_page 延伸到视口底部以下（我在这里没有看到任何问题），一旦到达媒体查询断点并且background-attachment 发生变化，背景图像的大小似乎会莫名其妙地跳跃.

这实际上是有充分理由的，它主要与您对background-size: cover 的使用有关。虽然#main_page 的样式是background-attachment: fixed，但这个背景需要覆盖的区域只是视口的大小，因为背景相对于它的位置永远不会改变。

但是，一旦您越过该媒体查询断点并且#main_page 的样式更改为background-attachment: scroll，该区域就会突然发生变化。由于背景现在相对于视口移动，因此延伸到视口下方的#main_page 的任何部分也需要被覆盖。考虑到这个要覆盖的新区域，背景图像会立即缩放，从而导致尺寸上的跳跃。（在this JSFiddle展出。）

您链接到的站点实际上使用了与您相似的样式，但确保其对应的 #main_page 永远不会扩展超过 100% 的视口。例如，this JSFiddle 使用您的 CSS 来实现与它们类似的效果（没有图像大小跳跃），因为#main_page 不包含任何会迫使其超过 100% 视口高度的内容。

希望这会有所帮助！如果您有任何问题，请告诉我。

【讨论】：