使用具有属性 background-attachment:fixed 的图像屏蔽 div

Question

有没有办法构建这样的东西：

http://jsfiddle.net/cuginoCoso/k5zk5m9q/10

没有 div 覆盖 div 顶部的区域？

在这里你可以看到没有覆盖 div 的样子： http://jsfiddle.net/cuginoCoso/k5zk5m9q/9/

我希望能够将 div 放置在任何地方而不用遮盖它。通常你会使用position:fixed;我认为在 div 上，但是您无法滚动图像。
谢谢

Answer 1

这是我测试过的，它很有效，而且很简单。使用overflow-y: scroll 将替换您在 div 顶部的框，将您的滚动包装到一个小框内。

HTML

<div class="wrapper">
    <div style="background-image: url(1.png)"></div>
    <div style="background-image: url(2.png)"></div>
    <div style="background-image: url(3.png")></div>
</div>

CSS

.wrapper {
    position: absolute;
    overflow: scroll;
    width: 200px;
    height: 200px;
}
.wrapper div {
    width: 200px;
    height: 200px;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size: cover;
}