0

このCSSは次のURLから生成されています：http： //ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* Opera */ 
background-image: -o-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 487, color-stop(0, #FFFFFF), color-stop(1, #BCD2E3));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle closest-corner at center bottom, #FFFFFF 0%, #BCD2E3 100%);

古いブラウザによく劣化し、グラデーションの代わりに画像を使用する場合、どうすればこれを作成できますか？

これが背景画像付きの現在のCSSです。また、私の画像は現在1600X144であり、それに応じてグラデーションの中心を中央に配置したいと思います。

.navbar .navbar-inner {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 10px rgba(239, 24, 3, 0.1);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 10px rgba(239, 24, 3, 0.1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 10px rgba(239, 24, 3, 0.1);
    background: url(../images/bgHeader2.png);
}
4

3 に答える 3

3

生成されたコードは、古いブラウザではすでに劣化しています。background-image: url(bgHeader2.png);プロパティ値を使用し、解析できないため、グラデーションプロパティを無視します（これが、プロパティの順序が重要である理由です）。

生成されたコードが非常に冗長であるという事実以外に、何も問題はありません。

于 2012-09-17T21:29:49.977 に答える
1

他の人はあなたの例がうまく機能し、優雅に劣化するはずだと言っているので、私はそれには入りません。

グラデーション画像の中央揃えについてのサイドノートについては。背景画像の位置を制御する最も簡単な方法は、background-positionプロパティを使用することです。

背景をどのように配置したいかはわかりませんが、大げさな推測は次のとおりです。

background-position: center center;

バックグラウンドで直接実行することもできます-プロパティ：

background: url(../images/bgHeader2.png) center center;
于 2012-09-17T21:33:23.307 に答える
0

background: ....代わりに使用する方が良いとはbackground-image:思いませんか（これが役立つかどうかはわかりませんが、ColorZillaをチェックすると、古いブラウザをサポートする例が表示されます。ただし、グラデーションはIE6で機能するはずです...

于 2012-09-17T21:30:42.970 に答える