0

次の背景を持つHTML5ページがあります。

background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);

これは、ページが長くなるまで（15000px程度）正常に機能します。長くなると、Firefoxでは背景が完全に消えます。

他の場所を探すと、これでは機能しない2つの解決策が得られました。htmlと身長を100％、またはbackground-attachment：fixedを使用することになりました。どちらも、ドキュメントの高さではなく、グラデーションの高さをビューポートに一致させます。

これは短いページでは問題なく機能しますが、長いページではFFが壊れます。HTMLを再構築せずに使用できるCSSトリックはありますか？

4

2 に答える 2

1

私の状況では、前の答えはそれを修正しませんでしたが、私はそれを修正した解決策を見つけました：

    background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%) no-repeat;

「繰り返しなし」を指定すると、ドキュメントの高さの変更（無限スクロール）に関係なく、100％が尊重されます。

于 2012-09-28T22:49:10.523 に答える
0

min-heightHTMLノードでを指定してみてください。

デモ： http： //jsfiddle.net/SO_AMK/76cyn/

CSS：

html {
    min-height: 100%;
}

body {
    background: radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -o-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
}

または、固定の背景が必要な場合：http: //jsfiddle.net/SO_AMK/76cyn/1/

于 2012-09-21T18:25:52.140 に答える