470

<body>合計300pxの高さのコンテンツを言ってください。

<body>使用の背景を設定した場合-webkit-gradientまたは-moz-linear-gradient

次に、ウィンドウを最大化（または300pxより高くする）し、グラデーションは正確に300px（コンテンツの高さ）になり、ウィンドウの残りの部分を埋めるために繰り返します。

これはwebkitとgeckoの両方で同じであるため、バグではないと思います。

しかし、繰り返すのではなく、グラデーションをストレッチしてウィンドウを埋める方法はありますか？

4

13 に答える 13

788

次のCSSを適用します。

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

編集：margin: 0;コメントごとの本文宣言に追加されました（ Martin）。

編集：background-attachment: fixed;コメントごとの本文宣言に追加されました（ Johe Green）。

于 2010-05-19T22:55:31.427 に答える
174

以前の回答に関しては、コンテンツをスクロールする必要がある場合、設定htmlとbodytoheight: 100%は機能しないようです。fixed背景に追加すると、それが修正されるようです-いいえneed for height: 100%;

例えば：

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

于 2010-07-20T21:15:02.543 に答える
33

私はパーティーに遅れていることを知っていますが、ここにもっと確かな答えがあります。

あなたがする必要があるのはではmin-height: 100%;なく使用することだけでheight: 100%;あり、あなたのグラデーションの背景は、コンテンツがスクロール可能であっても、繰り返さずにコンテンツの高さ全体を拡張します。

このような：

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#b5e48c, #457b9d);
}

ただし、2番目の解決策があります。

fixed他の人が言っているように、background宣言に値を追加すると、グラデーションがビューポートの高さ全体に拡張されます。

このような：

body {
    background: linear-gradient(#b5e48c, #457b9d) fixed;
}

min-height: 100%;確かに、まだで宣言する必要がありますhtml。

これがCodePenのデモで、両方のソリューションで遊ぶことができます：https ://codepen.io/ricardozea/pen/abwGBmz?editors=1100

于 2017-02-03T23:47:37.060 に答える
15

この問題を解決するために私が行ったことは次のとおりです...コンテンツの全長のグラデーションが表示され、背景色（通常はグラデーションの最後の色）にフォールバックします。

   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }
<body>
  <h1>Hello world!</h1>
</body>

これをFireFox3.6、Safari 4、およびChromeでテストしました。何らかの理由で、HTMLタグのスタイル設定をサポートしていないブラウザーの場合、本体の背景色を保持します。

于 2010-05-21T15:02:01.683 に答える
14

設定html { height: 100%}はIEに大混乱をもたらす可能性があります。これが例です（png）。しかし、あなたは何がうまくいくか知っていますか？<html>タグに背景を設定するだけです。

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

背景は下まで伸びており、奇妙なスクロール動作は発生しません。他のすべての修正をスキップできます。そして、これは広くサポートされています。htmlタグに背景を適用できないブラウザは見つかりませんでした。これは完全に有効なCSSであり、しばらくの間使用されてきました。:)

于 2012-05-11T16:33:50.183 に答える
12

このページには部分的な情報がたくさんありますが、完全な情報ではありません。これが私がすることです：

  1. ここでグラデーションを作成します：http：//www.colorzilla.com/gradient-editor/
  2. BODYではなくHTMLにグラデーションを設定します。
  3. HTMLの背景を「background-attachment：fixed;」で修正します。
  4. BODYの上下の余白をオフにします
  5. （オプション）私は通常、<DIV id='container'>すべてのコンテンツを入れるものを作成します

次に例を示します。

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

これは、さまざまなサイズとスクロールのニーズのページでIE、Chrome、Firefoxでテストされています。

于 2013-07-29T18:48:21.233 に答える
4

汚れた; たぶん、最小の高さを追加できますか：100％; html、およびbodyタグに？それまたは少なくとも、終了グラデーションカラーであるデフォルトの背景色を設定します。

于 2010-05-19T20:57:54.580 に答える
4

スペースを追加し、最後に固定された単語で十分です。高さを設定する必要はありません。

body{
    background: linear-gradient(#e4efe9,#93a5cf) fixed;
}
于 2021-03-03T14:16:00.023 に答える
2

ここで答えを出すのに苦労しました。
フルサイズのdivを本体に固定し、負のzインデックスを付けて、グラデーションを付ける方がうまくいくことがわかりました。 

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

これが完全なサンプル ですhttps://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

于 2016-04-18T22:20:44.440 に答える
0

私はこのCSSコードを使用しましたが、それは私のために機能しました：

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

関連情報は、 http：//www.colorzilla.com/gradient-editor/で独自のすばらしいグラデーションを作成できることです。

/ステン

于 2012-04-01T08:14:47.573 に答える
-1

これは私がしたことです：

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

ボディを浮かせる前は、上部に隙間があり、htmlの背景色を表示していました。htmlのbgcolorを削除すると、下にスクロールするとグラデーションがカットされます。そこで、ボディを浮かせて、位置を相対、幅を100％に設定しました。それはサファリ、クローム、ファイアフォックス、オペラ、インターネットexplで動作しました..ああ待ってください。：P

皆さんはどう思いますか？

于 2011-07-18T16:14:55.540 に答える
-1 
background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;
于 2011-04-26T14:24:59.057 に答える
-4

100％の代わりに、pixxelを追加するだけで、これが取得され、ページ全体でギャップなしで機能します。

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }
于 2011-05-06T10:20:46.910 に答える