リッチコンテンツのCSSグラデーション

Question

グラデーションを使用すると、コンテンツがほとんどなくなり、グラデーションが繰り返されますが、どうすればそれを防ぐことができますか？

http://jsfiddle.net/mcqpP/1/

私はhtml { height: 100%; }を使用して試すことができますが、私のコンテンツをスクロールする必要がとき...勾配が

http://jsfiddle.net/mcqpP/3/

どのように私はこの

Answer 1

なぜ、あなたのグラデーションをレンダリングしないを修正することができますを繰り返し、 1ピクセル幅の画像として出力し、次のようなものを使用します。

body { 
    background-color: #fff; 
    background-image: url("images/background.jpg"); 
    background-position: center top; 
    background-repeat: repeat-x; 
} 

背景リピート値を設定すると、背景...の繰り返し方法を制御するのに役立ちます。この場合、それは上部を横切ってソリッドバンドとしてレンダリングされる。

http://www.w3schools.com/css/pr_background-repeat.asp

また、MOZ-勾配一方、全てのブラウザで動作するはずの画像を使用することは問題となる可能性があります。上記のイメージメソッドは、すべてのブラウザで非常に予測可能な結果を​​表示する必要があります。

Answer 2

私は同じ問題を抱えていましたが、意味があり、スクロール/リピートグラデーションが受け入れられたことに気付きました。あなたは％ではなく固定された高さを設定することができますが、グラデーションが繰り返されないようにするには、高さを誰かの画面よりも大きく設定する必要があります。そして、あなたは人々の決意を知らない。私のアドバイスはそのまま放置することです。

Answer 3

絶対値ではなく、CSSのグラデーションにパーセンテージを設定する必要があります。現代のブラウザだけを気にしている限り（IE6は気にしません）、イメージから離れることをおすすめします.CSSはうまく機能します。

私は100回upvoteできますか？この質問の答えから私の答えを引き出しています： How to get a vertical gradient background to work in all browsers?それは受け入れられた答えはフルクロスブラウザとの互換性で必要なすべてを持っています。ここで

は、私はあなたの例を取り、それを働かせたところです。http://jsfiddle.net/HJvpf/1/

body { 
    background: -moz-linear-gradient(top, red 0%, blue 100%); 
    background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue)); 
} 

ああ、あなたはhtml上の高さを100％に設定しているため、あなたの第二jsFiddleリンクで、それは勾配を繰り返した理由はあるが、勾配bodyであった。あなたはheight: 100%;をbodyに移動しますが、それはかなりうまく動作しますが、私の解決策でわかるように、高さを指定する必要は全くありません。

編集：だからあなたはそれを繰り返さないようにしますが、あなたはそれが全高を占めることを望ましくありません。ちょうどrepeat-xを設定してください。下のグラデーションカラーを持っているhttp://www.w3schools.com/css/pr_background-repeat.asp

body { 
    background: -moz-linear-gradient(top, red, blue) repeat-x; 
    background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x; 
} 

にスペースの残りの部分を埋める：

body { 
    background: blue -moz-linear-gradient(top, red, blue) repeat-x; 
    background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x; 
}