49

Internet Explorer にはいくつかの独自の拡張機能があり、グラデーションの背景を持つ div を作成するなどのことができることを知っています。要素名またはその使用法を思い出せません。誰かがいくつかの例やリンクを持っていますか?

4

11 に答える 11

83

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

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;
}
于 2010-06-18T13:09:21.927 に答える
23

IE で処理できるカスタム CSS フィルターを参照して ください http://msdn.microsoft.com/en-us/library/ms532847.aspx

于 2008-10-17T20:37:26.500 に答える
11

このfilterスタイルは、IE8 および IE9 で機能するはずです。

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}
于 2010-05-28T02:26:07.843 に答える
7

IE のグラデーションに関して重要な落とし穴は、Microsoft のフィルターを使用することはできますが...

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;

...グラデーションで覆われたテキストのクリアタイプを殺します。通常、グラデーションの目的は UI の見栄えを良くすることであることを考えると、それは私にとって大きな問題です。

そのため、IE では代わりに繰り返し背景画像を使用します。背景画像 css が他のブラウザーのグラデーション CSS と組み合わされている場合 (Blowsie の回答に従って)、他のブラウザーはグラデーション css を優先して背景画像を無視するため、最終的には IE にのみ適用されます。

background-image: url('/Content/Images/button-gradient.png');

グラデーションの背景をすばやく生成するために使用できるサイトはたくさんあります。私はこれを使います。

于 2011-12-20T01:01:12.210 に答える
6

Microsoftの優れたツールで、色をリアルタイムで調べ、すべてのブラウザのCSSを生成できます：http： //ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

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

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
于 2012-04-27T13:28:07.113 に答える
4

この便利なリンクを追加すると思いました: http://css3please.com/

すべてのブラウザーでグラデーションを機能させる方法を示します。

于 2011-03-23T11:04:13.310 に答える
3

IE10 は次のようにグラデーションをサポートすることに注意してください。

background: -ms-linear-gradient(#017ac1, #00bcdf);
于 2011-07-15T16:50:35.830 に答える
2

ScriptFX.comの記事から右：

<body bgcolor="#000000" topmargin="0" leftmargin="0">

    <div style="width:100%;height:100%; filter: progid:
        DXImageTransform.Microsoft.Gradient (GradientType=1,
        StartColorStr='#FF006600', EndColorStr='#ff456789')">

Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below

    </div>
</body>
于 2008-10-17T20:40:19.117 に答える
1

これを試して：

.red {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
    height: 0; /* gain layout IE5+ */   
    zoom: 1; /* gain layout IE7+ */
}
于 2011-06-30T15:57:00.153 に答える
0

IE9のグラデーションに苦労しているときに発見した2つのこと。

  1. は-ms-filter私にはうまくいきませんでした。単純に使用する必要がありましたfilter。
  2. height: 100%IEがグラデーションを使用するには、クラスに追加する必要がありました。
于 2012-05-06T15:45:26.733 に答える