ページにグラデーションの背景を上から下に流したいと思います。グラデーションが現在のブラウザー ビューポートの上部から下部に伸び、ページを上下にスクロールするのと同じように見えるという点で、背景を固定画像のように動作させたいと考えています。つまり、スクロールしても繰り返されません。固定されたままです。
だから私が欲しいのはこれです:
一番下までスクロールすると、これが表示されます
ページの下部と上部のグラデーションがまったく同じに見えることに注意してください。完全な黄色から完全な赤になります。
私が実際にできる最善のことは、次のように、グラデーションを表示可能な部分だけでなく、ページのコンテンツ全体に広げることです。
下部は次のようになります。
ここで、グラデーションが現在表示されているものだけでなく、コンテンツ全体の長さにまたがっていることに注意してください。そのため、ページの上部ではほとんど黄色が表示され、ページの下部ではほとんど赤が表示されます。
y平面で引き伸ばされ、x平面で繰り返される画像を使用してこれを解決できると思いますが、可能であれば、画像を引き伸ばすとブロック状で粒状でないグラデーションが発生する可能性があるため、これを行いません。これはCSSだけで動的に行うことができますか?