1

グラデーションのある複数の背景があり、Firefox、Chrome、Safariで機能し、モバイルデバイス用の特定のメディアクエリがあります。

いつものように、問題はInternetExplorerです。以前は、単一の背景画像を読み込んだIEの条件付きスタイルシートを使用していましたが、私が知る限り、IE10はCSSで<!-IfIE->をサポートしていません。

理想的には、css3グラデーションと個別の背景画像をすべてのブラウザーで機能させたいのですが、すべてのIEブラウザーで単一の背景画像を使用できてうれしいですが、これまでのところ、単一の背景画像はIEでは機能しません。

mainstyle.cssのCSS

    body{
    font:14px 'questrialregular', Arial, Helvetica, sans-serif;
    margin:0;
    width:100%;
    color:#797979;

    background-image: 
    url(../img/bknd_img1.png),
    url(../img/bknd_img2.png),
    url(../img/bknd_img3.png),
    url(../img/bknd_img4.png),
    url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb));

    background-image: 
    url(../img/bknd_img1.png),
    url(../img/bknd_img2.png),
    url(../img/bknd_img3.png),
    url(../img/bknd_img4.png),
    url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);

    background-attachment:fixed;
    background-position:top right, top left, center bottom,  bottom right,  left bottom;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-color:#509deb;
    display:block;}

Internet ExplorerのCSS:style-ie.css

    font:14px 'questrialregular', Arial, Helvetica, sans-serif;
    margin:0;
    width:100%;
    color:#797979;

    background-image: url('img/bknd_full_img.jpg');
    background-attachment:fixed;
    background-position:center top;
    background-repeat: no-repeat;
    background-color:#fff;
    display:block;  
}
4

1 に答える 1

0

問題は、WebKit(古い構文を使用)とFirefox(少し新しい構文を使用)にグラデーションと複数の背景のみを与えることです。プレフィックスまたはプレフィックスなしのバージョンを指定しないため、IEまたはOperaのいずれかがグラデーションまたは複数の背景を表示できる方法はありません。

IE10は、プレフィックスなしで最新の最終構文を使用してグラデーションを実装します。最新のOperaもそうですし、最近のFirefoxもそうです。IE10は、他のブラウザーと同じように機能するため、条件付きコメントコードは必要ありません。

放射状のグラデーションは次のようになります。

background-image: 
    url(../img/bknd_img1.png),
    url(../img/bknd_img2.png),
    url(../img/bknd_img3.png),
    url(../img/bknd_img4.png),
    url(../img/bknd_img5.png),
    radial-gradient(circle closest-side at center, #c0deff, #509deb);

構文の変更の詳細については、IEブログ[0]および仕様[1]を参照してください。

[0] http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx、[1 ] http://dev.w3.org/ csswg / css3-images /#radial-gradients

于 2012-12-14T07:08:48.337 に答える