粘性元素与背景附件固定

Question

考虑一下：http://jsfiddle.net/yP7Nf

示例代码：

<div class="first"><img src="http://placekitten.com/g/200/300"/></div>
<div class="second"></div>
<div class="third"></div>

.first {
background-color: #a6a6a6;
height: 600px;
background-attachment: fixed;
background-image: url("http://placehold.it/1000x500");
}

.second {
background-color: #fff;
min-height: 500px;


}

.third {
background-color: #ff0000;
min-height: 500px;
background-attachment: fixed;

}

我希望猫图片保持粘性，所以第二个div（'.second'）可以覆盖它，就像它覆盖背景一样。

我想模拟与background-attachment相同的行为：用cat图片修复。

帮助。

Answer 1

在您的图片上，使用position : fixed来阻止它滚动，并z-index:-1使其落后于事物

如果它落后于你不想要的东西，请使用z-index：-2