如何背景附件：固定到div而不是视口

Question

我有很大的背景资料。

<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），具有基于{{的滚动效果1}}。

我想要的是背景附件：固定为相对于div而不是视口。

Answer 1

背景图片默认为＆＃34;固定＆＃34;他们所附着的元素。当你将后台CSS属性设置为fixed时，它会对DOM元素执行相同的操作，它会使整个文档（视口）修复它。

将固定属性更改为滚动应该可以解决这个问题：

background:url('cover.jpg') no-repeat scroll center center / cover;