Question

我使用了以下css进行径向渐变。

background-image: -moz-radial-gradient(50% 0 , rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0)), -moz-radial-gradient(50% 100% , rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
   background-image:  -ms-linear-radial-gradient(50% 0 , rgba(0, 0, 0, 0.60), rgba(255, 255, 255, 0)), -ms-linear-radial-gradient(50% 100% , rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0));
   background-image: -o-linear-radial-gradient(50% 0 , rgba(0, 0, 0, 0.60), rgba(255, 255, 255, 0)), -o-linear-radial-gradient(50% 100% , rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0));
    background-image: -webkit-radial-gradient(50% 0 , rgba(0, 0, 0, 0.60), rgba(255, 255, 255, 0)), -webkit-radial-gradient(50% 100% , rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0));

它在firefox和google chrome中运行良好。在IE中我需要相同的东西。我从谷歌中提取了以下css以在IE中工作

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

但我不知道如何更改百分比和颜色以匹配上述css。有什么帮助吗？

http://jsfiddle.net/tKjap/

Answer 1

IE支持rgba颜色吗？如果是，则只需用hex颜色替换复制代码中的rgba颜色。

例）

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(255, 255, 255, 0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0.35)', endColorstr='rgba(255, 255, 255, 0)',GradientType=0 ); /* IE6-9 */

一些阅读：

Answer 2

您可以根据自己的要求获得Gradient CSS，也可以根据您的颜色要求制作Gradient CSS。

http://www.colorzilla.com/gradient-editor/

Answer 3

这应该对你有所帮助 http://davidwalsh.name/css-gradients http://www.webdesignerwall.com/demo/gradient-box.html http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

在径向梯度css问题

3 个答案: