1

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

这很好用...

#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并以全尺寸显示（我认为更大）。当我background-attachment: scroll;在第一组 CSS 中进行测试时，它会做同样的事情。

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

4

1 回答 1

2

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

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

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

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

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

于 2014-07-28T14:41:21.337 回答