44

ページにグラデーションの背景を上から下に流したいと思います。グラデーションが現在のブラウザー ビューポートの上部から下部に伸び、ページを上下にスクロールするのと同じように見えるという点で、背景を固定画像のように動作させたいと考えています。つまり、スクロールしても繰り返されません。固定されたままです。

だから私が欲しいのはこれです：

ここに画像の説明を入力

一番下までスクロールすると、これが表示されます ここに画像の説明を入力

ページの下部と上部のグラデーションがまったく同じに見えることに注意してください。完全な黄色から完全な赤になります。

私が実際にできる最善のことは、次のように、グラデーションを表示可能な部分だけでなく、ページのコンテンツ全体に広げることです。

ここに画像の説明を入力

下部は次のようになります。 ここに画像の説明を入力

ここで、グラデーションが現在表示されているものだけでなく、コンテンツ全体の長さにまたがっていることに注意してください。そのため、ページの上部ではほとんど黄色が表示され、ページの下部ではほとんど赤が表示されます。

y平面で引き伸ばされ、x平面で繰り返される画像を使用してこれを解決できると思いますが、可能であれば、画像を引き伸ばすとブロック状で粒状でないグラデーションが発生する可能性があるため、これを行いません。これはCSSだけで動的に行うことができますか?

4

4 に答える 4

2 
html {
  height: 100%;
  /* fallback */
  background-color: #1a82f7;
  background: url(images/linear_bg_2.png);
  background-repeat: repeat-x;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #2F2727, #1a82f7);

  /* IE 10 */
  background: -ms-linear-gradient(top, #2F2727, #1a82f7);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #2F2727, #1a82f7);
}

http://css-tricks.com/examples/CSS3Gradient/
http://css-tricks.com/css3-gradients/

サポートしているブラウザーによっては、画像のフォールバックが必要な場合と不要な場合があります。そうでない場合は、 IE 6-8 を許可する代わりにfilterand-ms-filter構文を含めることをお勧めします。これまたは画像がなくても、にフォールバックしますbackground-color

于 2013-08-07T03:40:03.877 に答える
-5

これを行う別の方法（実際の画像を使用）：

body {
  background-attachment: local; // or 'fixed' here
  background-image: url(fancy.jpg);
  background-size: 100% 100%;
  overflow:auto;
  box-sizing:border-box;
  width:100%;
  height:100%;
  margin:0; 
}
于 2013-08-07T03:50:36.497 に答える