2

このコードの下に、背景の放射状の円のグラデーションを作成します。

IEを除くすべてのブラウザで正常に動作しています（IE9でも動作しません）

IE9とIE8でも機能するようにするには、cssに何を追加する必要がありますか？

http://jsfiddle.net/bhBtw/

コード：

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style type="text/css" media="screen">
        html { 
            background-color: #eee;
            height:768px;
        }
        div {
            width: 96%;
            height: 800px;
            padding: 10px;
            margin:0 auto;
        }

        div.circle {
            background-image: radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -o-radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -ms-radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -moz-radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -webkit-radial-gradient(center center, circle cover, #352e24, #1a160d);
        }
    </style>
</head>
    <body>
        <div class="circle"></div>
    </body>
</html>
4

1 に答える 1

7
  1. 9 までの IE は、CSS グラデーションをサポートしていません。したがって、IE 9 以前では動作しないはずです。
  2. -ms-linear-gradient行は必要ありません。グラデーションは、IE10 ではプレフィックスなしでサポートされており、IE9 以前ではまったくサポートされていません。
  3. 接頭辞なしのバージョンは常に最後に置く必要があります。プレフィックスなしの構文をサポートするブラウザーでも、プレフィックスなしのバージョンを最後に配置しないと、プレフィックス付きの構文が引き続き使用されます。
  4. 新しいグラデーション構文では、farthest-corner代わりにcover. これはデフォルト値なので、省略できます。
  5. centerは position のデフォルト値です (これも省略できます)。

IE9 以前の場合はどうすればよいですか? あまりない。フォールバック:

  • 線形IE フィルター グラデーション または
  • そのグラデーションの背景画像または
  • ただの無地の色 (ここで使用している 2 つの色は互いにそれほど違いがなく、ほとんどの人はよく見ないとグラデーションがあることさえわからないため、この場合に使用するオプションです)

したがって、そのコードは次のようになります。

background: #352e24; /* ultimate fallback, always put this, just in case */

/* if you choose the IE filter linear gradient fallback */
filter: progid:DXImageTransform.Microsoft.gradient(
             startColorstr=#352e24, endColorstr=#1a160d);

/* if you choose to use the image fallback */
background: url(gradient.png);

/* Chrome, Safari */
background: -webkit-radial-gradient(circle, #352e24, #1a160d);

/* Firefox 15 and older, Firefox for Android */
background: -moz-radial-gradient(circle, #352e24, #1a160d);

/* Opera 11.6 (older only supported linear), Opera 12.0, Opera Mobile 12.0 */
background: -o-radial-gradient(circle, #352e24, #1a160d);

/* standard syntax, IE10, Firefox 16+, Opera 12.1+ */
background: radial-gradient(circle, #352e24, #1a160d);
于 2013-01-20T12:25:37.690 に答える