css - 背景附件:滚动和背景大小:覆盖不起作用

Question

我有一张背景图片，我想固定在大屏幕上并在小设备上滚动。

这很好用...

#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/我错过了什么？

Answer 1

我想我明白你的意思了。如果 #main_page 延伸到视口(viewport)底部下方(我没有看到这里没有问题)，一旦到达媒体查询断点，背景图像似乎莫名其妙地变大了和 background-attachment 更改。

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

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

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

希望对您有所帮助!如果您有任何问题，请告诉我。