web-dev-qa-db-ja.com

CSSを使用したグラデーションの背景を修正

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

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

enter image description here

一番下までスクロールすると、これが表示されます enter image description here

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

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

enter image description here

下部は次のようになります。 enter image description here

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

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

cssbackgroundgradient
30
d512

CSS3グラデーションを使用してこれを行うには、セレクターに次を追加してみてください。

たとえば、グラデーションを#backgroundに適用する場合は、CSSグラデーションの後に追加します。 重要：背景プロパティの後にこれを追加する必要があります。

background-attachment: fixed;

w3schools.org：CSS background-attachment property

コード全体は次のようになります。

#background {
  background: #1e5799;
  background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
  background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
  background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
  background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
  background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
  background-attachment: fixed;
}
70
ScottA
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/

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

2
Michael Lawton