CSS3の線形グラデーションカラーストップは、WebKitの

Question

に異なる働きを参照してください。ほとんど終了し、背景色の変更場所をブックカバーにwww.get-offit.com

ゴー：

我々は持っている：

html { 
background: -moz-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -ms-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -o-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(5, #FFFFFF), to(#EEEEEE)); 
background: -webkit-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 

}

Firefoxを使用してサイトを開くと、グラデーションが何も起こらずに白とグレーの間に明確なカットラインが得られます。

あなたがChromeでサイトを開くと白の両端、あなたが5px'ishグレーのグラデーションを得る

と灰色が開始されます：

ように私はそれを作るにはどうすればよい

現在のFirefoxのようにWebkitブラウザで実際のグラデーションを表示せずに色が突然停止しますか？テストケースでこれを再現するために、いくつかの試みから乾杯 G

Answer 1

が、問題は直接指定なし高さがないときWebKitの実装は、トラブルhtmlの正確な高さを計算しているのかもしれ表示されます。 heightを100％または固定ピクセルの高さに設定すると、それがクリアされるようです。しかし、私はそれが実用的な解決策であるとは思わない。自分自身ではこれを他の要素の問題として気付いていないので、htmlの線形グラデーションを使用するのが特にそうです。

Webkitのバグの場合は、灰色の背景を要素に適用できるようにCSSを修正することをお勧めします。明らかに、これはWebkitに対応する大き​​な変更ですが、IEの古いバージョンと互換性のあるバックグラウンドも作成します。

Answer 2

ウェブキットで#fffから#eeeへの固体移行を達成したい場合は、グラデーションを脇に置かなければならないと思います。このようなCSSを設定した場合、

html { 
    background: #eee; 
    } 

    body { 
     background: #fff; 
     height: 500px; 
     } 

グラデーションを使用して達成しようとしていることを複製します。 （スクリーンショットを参照）それはまた、クロスブラウザと互換性があります。私はこれが役立つことを願っています

Answer 3

これはWebKitの&ヤモリの間だけの違いです。残念なことに、このような大きなグラデーションサイズでは、Webkitは巨大なグラデーションを描画するための「高速」なル​​ートをとるように見えます（グラデーションはブラウザで生成された画像です）。

background-position-y: 500px;を使用して、Webkitの上部からグラデーションを500pxから開始するようにしてください。

はフィドルを参照してください：http://jsfiddle.net/3ampp/

Answer 4

は、Microsoft社のサイト（うん、マイクロソフト）で、このCSSのツールを使用してみてください：

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

それはクロスブラウザのCSSコード（IEだけでなく）を生成するのに役立ちますし、グラディエント効果を少し変えることで便利になるかもしれません。グラデーションポイントを追加したり、異なる色を試したりすることもできます。

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); 

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); 

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); 

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EEEEEE)); 

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); 

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); 

Answer 5

これは、すべてのブラウザで私の作品：

html { 
background: -moz-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -ms-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -o-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -webkit-linear-gradient(#FFFFFF 500px, #EEEEEE 0px); 
background: linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
} 

勾配はあなたが達成しようとしている効果には必要ありませんが、ここで

はオンラインツールからのコードサンプルです。

Answer 6

これを試しましたか？

background: -moz-linear-gradient(top, #FFFFFF 500px, #EEEEEE 520px); 

Answer 7

egidが述べたように、クロムはグラデーションを描画するための高速なルートをとっています。クールなアニメーションデモンストレーションについては、this SO questionとthis penを参照してください。