複数の背景の周りに奇妙な問題があります。ページの背景を作成するために、線形グラデーション、放射状グラデーション、および繰り返される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グラデーション機能を備えていると述べています。何が間違っているのかわからない。