径向定向在IE9上渲染CSS3渐变

Question

我使用Colorzilla渐变生成器（ http://www.colorzilla.com/gradient-editor/ ）为我的网站创建了一个径向渐变，我希望椭圆形位于底部。

从

   background: #667de8; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NjdkZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiM1NDZlYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MSUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzYzVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover,  #667de8 0%, #546ebf 15%, #283c5a 63%, #283c5a 91%, #283c5d 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, bottom bottom, 100%, color-stop(0%,#667de8), color-stop(15%,#546ebf), color-stop(63%,#283c5a), color-stop(91%,#283c5a), color-stop(100%,#283c5d)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* W3C */

至

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NjdkZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiM1NDZlYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MSUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzYzVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(bottom, ellipse cover,  #667de8 0%, #546ebf 15%, #283c5a 63%, #283c5a 91%, #283c5d 100%); /* FF3.6+ */
background: -webkit-gradient(radial, bottom bottom, 0px, bottom bottom, 100%, color-stop(0%,#667de8), color-stop(15%,#546ebf), color-stop(63%,#283c5a), color-stop(91%,#283c5a), color-stop(100%,#283c5d)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(bottom, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(bottom, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Opera 12+ */
background: -ms-radial-gradient(bottom, ellipse cover,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* IE10+ */
background: radial-gradient(ellipse at bottom,  #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* W3C */

因此，我将每次出现的中心都更改为底部 ，然后成功生成了一个椭圆形位于底部的径向渐变。

但是在IE9中，它无法渲染底部椭圆，然后我发现下面的以下代码也需要修改：

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NjdkZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiM1NDZlYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MSUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzYzVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

那么，有什么方法可以修改代码（数据URI）以使椭圆在底部？ 如果不可能，如何使椭圆位于底部？ 任何想法将不胜感激。

Answer 1

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

请使用ms过滤器IE9 beta1。任何IE问题，请访问此链接http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/