2

参照: 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 でサイトを開くと、白とグレーの間に明確な境界線が表示され、グラデーションは発生しません。

Firefoxのスクリーンショット

Chrome でサイトを開くと、白が終わりグレーが始まる 5 ピクセルのグレーのグラデーションが表示されます。

クロムのスクリーンショット

現在Firefoxで行っているように、Webkitブラウザーで実際のグラデーションを表示せずに、色が突然停止するようにするにはどうすればよいですか?

乾杯G

4

7 に答える 7

5

Microsoft のサイト (はい、Microsoft) でこの css ツールを使用してみてください。

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

(IE だけでなく) クロスブラウザーの CSS コードを生成するのに役立ち、グラデーション効果を少し変更するのにも役立ちます。さらにグラデーション ポイントを追加したり、別の色を試すこともできます。

オンライン ツールのコード サンプルを次に示します。

/* 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%);
于 2012-05-11T06:10:08.770 に答える
2

これは、webkit と gecko の単なる違いです。残念なことに、このような大きなグラデーション サイズでは、webkit が膨大なグラデーションをレンダリングするために「高速」ルートを取り (グラデーションはブラウザーによって生成された画像であることを忘れないでください)、あいまいさを加えているように見えます。

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

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

于 2012-05-10T20:20:36.523 に答える
2

htmlテストケースでこれを再現しようとする試みから、高さが直接指定されていない場合、Webkit の実装が正確な高さを計算するのに問題がある可能性があるようです。heightaを 100% に設定するか、ピクセルの高さを固定すると、問題が解決するようです。しかし、それが実際的な解決策であるとは思えません。私自身の使用では、これは他の要素の問題として気づいていないので、 で線形グラデーションを使用することに特有のものかもしれませんhtml。

Webkit のバグである場合は、要素に灰色の背景を適用できるように css を作り直すのが最善の解決策です。明らかに、これは Webkit に対応するための大きな変更ですが、背景が古いバージョンの IE と互換性を持つようにもなります。

于 2012-04-27T14:05:59.587 に答える
1

これを試しましたか？

background: -moz-linear-gradient( top, #FFFFFF 500px, #EEEEEE 520px );
于 2012-05-11T15:05:39.947 に答える
0

これはすべてのブラウザーで機能します。

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);
}

達成しようとしている効果にはグラデーションは必要ありませんが。

于 2012-05-11T06:20:32.407 に答える
0

egid が述べたように、クロムはグラデーションをレンダリングするための高速なルートをとります。クールなアニメーションのデモンストレーションについては、この SO の質問とこのペンを参照してください。

于 2014-06-09T10:46:02.540 に答える
0

Webkit で #fff から #eee への確実な移行を実現したい場合は、グラデーションを脇に置いておく必要があると思います。このようにcssを設定すると

html {
   background: #eee; 
   }

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

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

ここに画像の説明を入力

于 2012-05-06T13:15:36.103 に答える