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

Question

有没有一种方法可以构建这样的东西：

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

而不使用div覆盖div顶部的区域？

在这里，您可以看到没有覆盖div的情况：http://jsfiddle.net/cuginoCoso/k5zk5m9q/9/

我希望能够在不屏蔽的情况下将div放在任何位置。通常你会在div上使用position:fixed；，但是这样你就不能滚动图片了。

谢谢

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;
}