112

IE9 内のグラデーションのベンダー プレフィックスを知っている人はいますか?

他のブラウザについて私が持っているものは次のとおりです。

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

おまけとして、Opera のベンダープレフィックスも知っている人はいますか?

4

10 に答える 10

58

私はパーティーに少し遅れているように見えますが、いくつかの上位ブラウザーの例を次に示します。

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

ソース: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

注: これらのブラウザーはすべて、16 進数表記の代わりに rgb/rgba もサポートしています。

于 2011-06-01T06:18:07.357 に答える
47

最適なクロスブラウザ ソリューションは

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/
于 2011-04-21T14:25:15.413 に答える
45

IE9 ベータ 1 の時点で独自のフィルターを使用する必要があります。

于 2010-10-14T17:02:16.240 に答える
37

現在、IE9 には CSS3 グラデーションのサポートがありません。ただし、代わりに PHP を使用して SVG (垂直線形) グラデーションを返す優れた回避策があります。これにより、デザインをスタイルシートに保持できます。

<?php

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

header('Content-type: image/svg+xml; charset=utf-8');

echo '<?xml version="1.0"?>
';

?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>

サーバーにアップロードして、次のように URL を呼び出すだけです。

gradient.php?from=f00&to=00f

これは、次のように CSS3 グラデーションと組み合わせて使用​​できます。

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

IE9 未満をターゲットにする必要がある場合は、古い独自の「フィルター」メソッドを引き続き使用できます。

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

もちろん、PHP コードを修正してグラデーションにストップを追加したり、より洗練されたもの (放射状グラデーション、透明度など) にすることもできますが、これは単純な (垂直) 線形グラデーションに最適です。

于 2011-05-08T12:41:30.963 に答える
11

すべてのブラウザグラデーションに使用するコード:

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

これを IE で機能させるには、高さを指定するか、要素zoom: 1に適用する必要があります。hasLayout

アップデート：

以下は、すべての LESS ユーザー向けの LESS Mixin (CSS) バージョンです。

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}
于 2012-06-27T08:43:42.183 に答える
6

Opera はまもなく、グラデーション サポートやその他の CSS 機能を備えたビルドを利用できるようになります。

W3C CSS ワーキング グループは CSS 2.1 を完成させていません。まもなく終了する予定です。CSS3 は正確にモジュール化されているため、仕様全体ではなく、モジュールをより迅速に実装に移行できます。

すべてのブラウザ会社は、異なるソフトウェア サイクル方法論、テストなどを使用しています。そのため、プロセスには時間がかかります。

CSS3 で何かを使用している場合、「プログレッシブ エンハンスメント」と呼ばれるものを行っていることを多くの読者がよく知っていると思います。サポートが最も多いブラウザで最高のエクスペリエンスが得られます。そのもう 1 つの部分は「グレースフル デグラデーション」です。つまり、エクスペリエンスは快適なものになりますが、ブラウザがモジュールまたは目的に関連するモジュールの一部を実装するまで、おそらく最高または最も魅力的ではないでしょう。

これは、残念ながらフロントエンド開発者が非常にイライラするという非常に奇妙な状況を生み出します: 実装の一貫性のないタイミング。つまり、これはどちらの側にとっても本当の挑戦です - あなたはブラウザ会社、W3C、またはさらに悪いことに - あなた自身を責めますか?メンバーは自分を責めますか？君は？

もちろん違います。それは常にバランスのゲームであり、現在のところ、業界としてそのバランスのポイントが実際にどこにあるかを把握していません. それが進化的テクノロジーで働く喜びです:)

于 2011-03-01T22:01:16.500 に答える
4

IE9 はまだ CSS グラデーションをサポートしていないことを理解しています。他の多くの素晴らしい新機能をサポートしているので、これは残念です。

IE のすべてのバージョンでさまざまな CSS3 機能 (グラデーションだけでなく、border-radius や box-shadow も含む) を最小限の手間でサポートする方法として、CSS3Pieを検討することをお勧めします。

CSS3Pie は IE9 で動作すると思います (プレリリース バージョンでは試しましたが、現在のベータ版ではまだ試していません)。

于 2010-10-15T16:01:46.107 に答える
2

IE9 については不明ですが、Opera はまだグラデーションをサポートしていないようです:

そのページに「グラデーション」は発生しません。

ただし、Opera 以外のすべてのブラウザーで CSS グラデーションを機能させる方法については、Robert Nyman による素晴らしい記事があります。

画像をフォールバックとして使用するように拡張できるかどうかはわかりません。

于 2010-10-14T16:55:19.283 に答える
2

バージョン 11 の時点で、Opera は -o- ベンダー プレフィックス付きの線形グラデーションをサポートしています。Chris Mills はそれについて Dev.Opera の記事を書きました: http://dev.opera.com/articles/view/css3-linear-gradients/

放射状グラデーションはまだ開発中です (仕様と Opera の両方で)。

于 2011-04-05T22:35:34.127 に答える
1

グラデーション ジェネレーターを使用すると、すべてが完璧になります ;) http://www.colorzilla.com/gradient-editor/

于 2012-07-12T09:42:14.650 に答える