html - background-attachment が固定されたスティッキー要素

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;

}

背景を覆うのと同じように、2 番目の div ('.second') で猫の画像を覆うことができるように、猫の画像を固定したままにします。

猫の絵で background-attachment:fixed と同じ動作をシミュレートしたい。

ヘルプ。

Answer 1

画像で、 a を使用しposition : fixedてスクロールからそれを防ぎ、 a を使用しz-index:-1て物の背後に移動させます

望ましくないものの背後にある場合は、 z-index:-2 を使用してください