使用属性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;
}