2011-08-04 9 views
0

私は複数の背景の周りにいくつかの奇妙な問題があります。私は線形グラデーション、放射状グラデーション、繰り返しGIF画像を組み合わせてページの背景を作ります。ここで は、私が(第1の本体内側)メインコンテナに割り当てるCSSです:Opera 11.11、複数の背景、グラデーション、モダニズム問題

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を使用したので、私は勾配がOKであることをほとんど確信しています。 次に、私はmodernizrを使用して、aldブラウザのフォールバックを行います。それはn側.NO-jsから、.NO-multiplebgsまたは.NO-cssgradients htmlの場合、このスタイルは、コンテナに割り当てられている:

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

すべてのブラウザが完璧に動作するように見える、IE9は戻って正しく落ちるが、オペラ。私はOpera 11.11でテストし、背景も全く表示しません。同じ時間、modernizrはそれが複数の背景とCSSのグラデーション機能を持っていると言います。私は何が間違っているのか分かりません。

Look at my site please, and help!

答えて

0

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

Operaが唯一の線形グラデーションをサポートしています(ラジアル勾配に注意し、hereを参照してください; Mar2011)。あなたはそのような不透明度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%), 

をあなただけの通常の画像のような背景画像などの線形グラデーションを追加することができますですから、ラジアルグラジエントのサポートを待つだけで済みます。

乾杯

EDIT:このlinkはSVGを経由してオペラで放射状のグラデーションを作成する方法を示して試してみてください。

+0

ステートメントに放射状のグラデーションを入れたときのように、代替画像があっても失敗します。私はちょうど今のところ放射状の部分をコメントアウトしています。私はSVG経由でそれを作成できるリンクを見つけました。私の答えで掲示される – frequent

関連する問題