3

一般に、CSS3 を使用して複数の背景を指定できることは知っており、以前に画像の上にグラデーションをうまく重ねることができました。htmlただし、これを基本要素に適用すると失敗するようです。Chrome と Firefox の両方で、グラデーションは以下の CSS でレンダリングされません。

html {
    background:#14283C;
    background-image:url('/images/bluenoise.png?1338342472'),-webkit-gradient(radial, center 8em, 0, center 8em, 100, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(255,255,255,0)));
    background-image:url('/images/bluenoise.png?1338342472'),-webkit-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-moz-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-o-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-ms-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
}

に同じスタイルを適用するとbody、グラデーションが正しくレンダリングされます。なぜこの違いがあるのか​​ について何か考えはありますか？

4

2 に答える 2

2

コメントに記載されているいくつかのトリックを試しましたが、最終的に機能したのは次のとおりです。

html{
    background:#14283C;
    background-image:-webkit-gradient(radial, center 8em, 0, center 8em, 100, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(255,255,255,0))),url('/images/bluenoise.png?1338386219');
    background-image:-webkit-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-moz-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-o-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-ms-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
}

唯一の変更点は、画像の前にグラデーションをリストすることです。さまざまなbackground-image引数が逆の順序でオーバーレイされているようです。ただし、この説明は、ScottS の fiddle と矛盾しているように思われます。これは、逆の順序を指定しているにもかかわらず、望ましい動作を示しています。

于 2012-05-31T16:14:00.887 に答える
1

クリストフが投稿したフィドルリンクは、Chromeでも機能しました。Firefoxでオーバーレイを機能させるには、要素にheightまたはを追加する必要がありました。このフィドルを参照してください。min-height: 100%html

ただし、コンテンツを用意するだけでも高さが増し、このフィドルが示すようにFirefoxで背景が機能するようになりました。

どうやら、Firefoxでレンダリングするには、グラデーションに要素に対して何らかの実際の高さが必要です。

于 2012-05-30T13:34:40.607 に答える