Question

我为Gradients提供了以下CSS：

对于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)";

对于IE 10

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

对于IE 10版本，我有3种颜色。前两个创建渐变，第三个颜色（#ffffff）在渐变结束时以白色显示页面的其余部分。 437px定义了渐变的高度。

如何为CSS Gradients修改IE 8-9的代码，以便我可以实现IE 10版本的所有功能？

Answer 1

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

对于IE9，您可以通过svg渐变实现此目的，例如：

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

Microsoft拥有一个不错的SVG渐变生成器here。

如果这不适合您，您可以模拟停靠点，这已在this SO question中讨论过。

Answer 2

在IE8 / 9上进行渐变的最佳方法是使用CSS3Pie。

这是一个Javascript polyfill库，它将标准的CSS渐变语法实现到旧版本的IE中。（它还有一些其他功能，如border-radius）。

只需下载Pie.htc文件并按照说明将其添加到您的站点，即可开始在IE 6-9中使用标准CSS渐变。

直接回答你的问题：CSS3Pie的渐变确实支持渐变颜色停止。（但即使没有这个，改进的-ms-filter语法也足以让我想要使用它。）

希望有所帮助。

如何修改IE Gradient CSS以使用高度和第三种颜色？

2 个答案: