0

我使用 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 */

所以我将每次出现的center更改为bottom，然后我成功地生成了一个椭圆位于底部的径向渐变。

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

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

那么有没有办法修改代码（Data URI）以使椭圆位于底部？如果不可能，我怎样才能让椭圆位于底部？任何想法将不胜感激。

4

1 回答 1

0 
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 beta 1。任何 IE 问题请访问此链接http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/

于 2013-11-20T07:53:31.213 回答