internet-explorer - How do I modify IE Gradient CSS to use height and a third color?

Question

I have the following CSS for Gradients:

For IE 8-9

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d6d2',]
endColorstr='#f9ffff', GradientType=1);
/* IE 8–9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7d6d2',
endColorstr='#f9ffff', GradientType=1)"; 

For IE 10

background: -ms-linear-gradient(top, #d7d6d2 0%,#f9ffff 437px,#ffffff 100%);

For the IE 10 version I have 3 colors. The first two create the gradient and the third color, which is #ffffff, shows the rest of the page in white color when the gradient has ended. And the 437px defines the height of the gradient.

How can I modify the code for IE 8-9 for CSS Gradients so I can achieve what I have with the IE 10 version?

Answer 1

IE8 不支持渐变色标。给定元素（例如 div 或按钮）只能使用两种颜色。

至于 IE9，您可以通过 svg 渐变来完成此操作，例如：

/* SVG as background image (IE9/Chrome/Safari/Opera) */ 
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0Q3RDZEMiIgb2Zmc2V0PSIxIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Y5RkZGRiIgb2Zmc2V0PSIwLjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGRkZGIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODM1KSIgLz4KPC9zdmc+);

微软在这里有一个不错的 SVG 渐变生成器。

如果这对您没有吸引力，您可以模拟停止，这已经在这个 SO question中讨论过。

Answer 2

The best way to do gradients on IE8/9 is to use CSS3Pie.

This is a Javascript polyfill library that implements the standard CSS gradient syntax into old versions of IE. (it also does a few other features like border-radius).

Simply download the Pie.htc file and add it to your site as per the instructions, and you can start using standard CSS gradients in IE 6-9.

To directly answer your question: CSS3Pie's gradients do support gradient colour stops. (But even without that, the improved syntax over -ms-filter is enough motivation for me to want to use it)

Hope that helps.