在ie9中获取渐变停止的效果答案

【问题标题】：Get effect of gradient stops in ie9在ie9中获取渐变停止的效果
【发布时间】：2013-10-18 10:19:47
【问题描述】：

我无法获得上述效果.. 我需要渐变在中间突然停止。在 Ie9 中，一切都很顺利 - 并且有光泽；/ 我在这里生成了渐变：http://www.colorzilla.com/gradient-editor/

添加：

<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->

没有任何区别:(感谢任何帮助！

【问题讨论】：

我强烈建议使用CSS3Pie 在 IE9 及更早版本中进行 CSS 渐变。 filter 和 SVG 方法有一些严重的局限性。

标签： html css internet-explorer-9

【解决方案1】：

不要对 IE9 使用过滤器。尝试使用 svg

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjczJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjczJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzgxZDdlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

过滤器仅适用于 2 个点。

【讨论】：

它在我的 ie9 中不起作用 - 我没有更新 ie，所以我有原始版本 (ie9) - 也许这就是原因？）
尝试使用 !important 禁用 ie9 中的过滤器。您的选择器可以在 CSS 中承载更多权重。

【解决方案2】：

我个人推荐此生成器用于您的渐变：

SVG Gradient Background Maker

CSS：

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMxRTU3OTkiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMyOTg5RDgiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzIwN0NDQSIgb2Zmc2V0PSIwLjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjN0RCOUU4IiBvZmZzZXQ9IjAuNSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c5MjEpIiAvPgo8L3N2Zz4=);
background-size:cover;

这不适用于 IE8 及更低版本，但适用于 IE 9>、Chrome 和 Firefox。

background-size:cover; 是 Firefox 不重复渐变的修复。

FIDDLE

【讨论】：

它在我的 ie9 中不起作用 - 我没有更新 ie，所以我有原始版本 (ie9) - 也许这就是原因？）