33

このグラデーションの背景がありますが、ページを塗りつぶす方法を繰り返したくありません。ページを塗りつぶす 1 つの大きなグラデーションにしたいのです。

html {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background: #70bg32;
  background-repeat: no-repeat;
  background: -webkit-linear-gradient(to left top, blue, red);
  background: -moz-linear-gradient(to left top, blue, red);
  background: -ms-linear-gradient(to left top, blue, red);
  background: -o-linear-gradient(to left top, blue, red);
  background: linear-gradient(to left top, blue, red);
}

http://jsfiddle.net/F7vf9/

4

7 に答える 7

88

今日の時点で、上記のどれも機能していません。線形グラデーションが繰り返されます。

ページ全体にグラデーションを引き延ばすには、これを css に追加する必要があります。

body {
    background:            linear-gradient(to left top, blue, red);
    background-attachment: fixed; /*edit*/
}
于 2015-07-29T23:23:40.177 に答える
64

グラデーションでビューポートを塗りつぶすには、<html>要素の高さを 100% にします: fiddle

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

グラデーションがビューポートの表示セクションを超えて繰り返されないようにするには (スクロールバーがあると仮定)、 に置き換えheight: 100%;ますmin-height: 100%;。

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

于 2013-05-30T16:31:58.980 に答える
6

高さ: 100% を html タグに追加すると、グラデーションが引き伸ばされます。background-size: カバーを削除することもできます。これも機能します：

html {
  height: 100%;
}
body {
  width: 100%;
  background: linear-gradient(to left top, blue, red);
}

他のブラウザーの残りの線形グラデーションを問題なく追加できるはずです。お役に立てれば！

于 2013-05-30T16:45:09.813 に答える