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延伸到视口底部以下（我没有看到它没有问题），一旦达到媒体查询断点并且{{{{{}，背景图像似乎莫名其妙地跳过了大小。 1}}改变。

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

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

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

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

background-attachment：scroll和background-size：封面不起作用

1 个答案: