0

オフセットを設定してグラデーションの背景をレンダリングすると、Firefox と Chrome で反対の結果が得られました。

ここに私のcssコード:

html
{
   background:linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 8%);
   background-position: center top 30px;
}

body
{
   background:linear-gradient(to bottom, rgba(255,255,255,0) 92%,rgba(245,245,245,1) 100%);
   background-position: center bottom 100px;
}

アイデアは、html 要素と body 要素に 2 つの反対のグラデーションを適用する背景の一種の「引き戸」を適用することです。

Body タグで下のオフセットを設定すると、問題が発生します。Firefox は正の値で上に移動しますが、Chrome は負の値 (または下は正の値) で上に移動します。そのため、2 つの主要なブラウザーの動作は正反対です。

これを解決する方法は?

4

1 に答える 1

0

Chromeの解決策を見つけました!

追加で十分です

 background-repeat:no-repeat;

この更新された JsFiddleに示されているように、BODY タグの css 宣言に:

于 2013-07-22T09:24:02.167 に答える