0

複数の背景の周りに奇妙な問題があります。ページの背景を作成するために、線形グラデーション、放射状グラデーション、および繰り返されるgif画像の組み合わせを使用します。これが私がメインコンテナに割り当てるcssです(最初はボディの内側):

    background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,.8) 100%),                                                -moz-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),     url("../img/bodyBackground.gif");
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.8))),  -webkit-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),  url("../img/bodyBackground.gif");
    background-image: -o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),                                                   -o-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),       url("../img/bodyBackground.gif");
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),                                                  -ms-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),      url("../img/bodyBackground.gif");
    background-image: linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),                                                      radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),          url("../img/bodyBackground.gif");
    background-repeat: no-repeat, no-repeat, repeat;

私はそれにcss3generatorを使用したので、グラデーションは大丈夫だとほぼ確信しています。次に、modernizrを使用して、aldブラウザーのフォールバックを作成します。nside .no-js、.no-multiplebgs、または.no-cssgradients htmlの場合、このスタイルはコンテナーに割り当てられます。

background-image: url("../img/bodyBackground.gif")

すべてのブラウザは完全に機能しているようで、IE9は正しくフォールバックしますが、Opera...私はOpera11.11でテストしましたが、背景がまったく表示されません。同時に、modernizrは、複数の背景とcssグラデーション機能を備えていると述べています。何が間違っているのかわからない。

私のサイトを見てください、そして助けてください!

4

1 に答える 1

0

私は少し助けることができると思います(ちょうど同じ問題に遭遇しました)...:

現在のところ、Operaは線形グラデーションのみをサポートしています(ここを参照、放射状グラデーションに関する注意; 2011年3月)。例で線形部分を機能させるには、次のように不透明度0のドットを追加する必要があります。

-o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%), 

これに:

-o-linear-gradient(top, rgba(0,0,0,.0) 75%,rgba(0,0,0,.8) 100%), 

通常の画像と同じように背景画像として線形グラデーションを追加できるので、放射状グラデーションのサポートを待つ必要があると思います。

乾杯

編集:SVGを介してOperaで放射状グラデーションを作成する方法を示すこのリンクを試してください。

于 2011-08-09T11:52:01.307 に答える