在 MSIE 9 及更早版本中设置线性渐变的开始和结束位置答案

【问题标题】：Setting linear gradient's starting and ending position in MSIE 9 and older在 MSIE 9 及更早版本中设置线性渐变的开始和结束位置
【发布时间】：2011-11-13 04:12:05
【问题描述】：

我有这个 CSS

background-image: linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);

带有 -moz、-o、-webkit、-ms（对于 IE10）前缀。

我需要使用 MSIE 的过滤器为较旧的 IE 获取此行为。

我能做到

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#F17B19', gradientType='1');

但在以前的情况下，它的行为是

background-image: linear-gradient(360deg,rgb(255,255,255),rgb(241,123,25));

或

background-image: linear-gradient(360deg,rgb(255,255,255) 0% ,rgb(241,123,25) 100%);

有没有办法（不使用多个 div）使用 MSIE 的 CSS 过滤器来完成设置渐变的起点和终点（在本例中为 25% 和 75%）？

【问题讨论】：

标签： internet-explorer css filter gradient

【解决方案1】：

很遗憾，用filter 完全不可能做到这一点。

但是，您可以使用 CSS3 PIE 来实现，它使用 JavaScript。

相对无痛：

div {
    background-image: -moz-linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);

    -pie-background: linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);
    behavior: url(/PIE.htc);
}

【讨论】：

对于 IE9 及更新版本，您可以使用 SVG 渐变。