web-dev-qa-db-ja.com

Internet Explorerのグラデーション色

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

htmlcssinternet-explorerbackgroundgradient
49
Jeremy

カスタムCSSフィルターを見てくださいIEは処理できます http://msdn.Microsoft.com/en-us/library/ms532847.aspx

23
Nick

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

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;
}
83
Blowsie

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

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}
11
James Lawruk

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');

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

7
Jonathan Moffatt

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%);
6
thezar

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

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

4
Sniffer

IE10は次のように勾配をサポートすることに注意してください。

background: -ms-linear-gradient(#017ac1, #00bcdf);
3
TimKola

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>
2
vmarquez

これを試して：

.red {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
    height: 0; /* gain layout IE5+ */   
    zoom: 1; /* gain layout IE7+ */
}
1
user669677

IE 9勾配。

  1. -ms-filterは機能しませんでした。単にfilterを使用する必要がありました。
  2. グラデーションを使用するには、IE=）のクラスにheight: 100%を追加する必要がありました。
0
Vincent