1

我有一个大背景封面。

<div id="cover">
    ...
</div>

和 CSS

#cover {
    background:url('cover.jpg') no-repeat fixed center center / cover;
    height: 350px;
    width: 100%;
}

预期输出：背景图像，调整为350px x 100%（在我的例子中为 350x900），应该具有基于<div id="cover"></div>.

实际输出：背景图像，调整为视口（在我的情况下为 1440x900），具有基于<html></html>.

我想要的是 background-attachment:fixed 相对于 div 而不是视口。

4

1 回答 1

1

Background images are by default "fixed" to the element they are attached to. When you set a background CSS property to fixed, it does the same it would do for a DOM element, it makes it fixed regarding the whole document (viewport).

Changing the fixed property to scroll should do the trick here:

background:url('cover.jpg') no-repeat scroll center center / cover;
于 2014-08-27T13:46:11.037 回答