1

私はこのウェブサイトにあるのと同様の背景効果を得ようとしています:

ここに画像の説明を入力してください

それを見ると、ウェブサイトの背景は黒ですが、ページの上部に残っている水平方向に引き伸ばされた背景画像があります。ページを下にスクロールすると、画像は上部に留まりますが、背景色に溶け込みます。

例のような画像を作成して使用しましbackground-size:coverたが、下にスクロールすると、画像は静止したままで、内容だけがスクロールします。それがまったく意味があるなら!

例を見て、誰かがこれを達成するために必要なCSSを親切に説明できますか?また、品質を損なうことなくより大きなブラウザで画像を拡大できるようにするには、画像サイズを(PSで)どのようにする必要がありますか?

WebサイトのCSSファイルを調べて何が起こっているのかを確認しようとしましたが、すべて1行であり、うまくいくのがわかりにくいです。

サイトへのリンクを追加して、どのようにスクロールするかを示しますが、どうやら許可されていないため、スクリーンショットを作成する必要があります。

よろしくお願いします。

4

1 に答える 1

2

その背景はcssを使用しているようです:

background:#000000 url(<img>) no-repeat scroll center top;

背景色と画像を設定し、画像を静的に上部に配置して、下にスクロールした後、背景色のみが表示されるようにします。

この効果を確認するには、chromeを使用して、cssを次のように変更します。

background:#00FF00 url(<img>) no-repeat scroll center top;

何が起こっているのかがわかります。

于 2013-03-26T19:06:35.257 に答える