4

背景画像を開始して固定位置にとどめようとしていますが、ページの残りの「コンテンツ」が終了するまで、完全な画像が表示されます。

私は純粋にCSSソリューションに取り組んでいます。画像はほとんどの (ラップトップ) 画面よりも大きいことに注意してください。

具体的には、私が使用しているコードは次のとおりです。

body {
  background:$bgcolor;
  background-image:url('http://i.imgur.com/cIGSehG.jpg');
  background-repeat:no-repeat;
  background-position:0px 72px;
  background-attachment:fixed;
  margin:0;
  ...
}

私が使用している画像は次のurl()とおりです。

スニペットからの背景画像

私が探している効果は、基本的に、ページの大部分を見ている間、画像は芝生の丘の約 10% のみを表示することですが、最終的にすべてのページ コンテンツを過ぎてずっと下にスクロールすると、芝生の丘の残りの 90% が表示されます。

私はこれをどこにも見つけることができませんでしたが、専門用語にあまり慣れていないので、検索用語が不十分だったのかもしれません.

4

1 に答える 1

1

さて、これは1つのジギーナットでした！これを達成するために、あまり安定していないトリックを思いつきました。今はこれ以上開発する時間はありませんが、実用的なコンセプトになるかもしれません。

主なコンセプト

ページの下部に到達したときにユーザーがホバーする可能性が高い、大きくて空のフッター領域を提供することにより、兄弟セレクターを使用して、背景を含む兄弟要素の位置を変更します。

#footer:hover ~ #background {
    background-position: center bottom;
}

いくつかの癖 (改善する必要があります) に加えて、視差効果を実現できます。

フィドルに行く

この JFiddle (Chrome) をチェックして、それを見て遊んでください。

于 2013-03-11T15:46:08.700 に答える