css - 跨浏览器背景 - 渐变加图像

Question

我试图用图像作为背景制作渐变，但在除基于 web-kit 的任何浏览器中都不起作用。你能帮我解决这个问题吗？

background: url("../images/pattern.png"), -moz-radial-gradient(60% 120%, circle, #dfd5a8 0%, #2f71a9 110%);
background: url("../images/pattern.png"), -webkit-radial-gradient(60% 120%, circle, #dfd5a8 0%, #2f71a9 110%);
background: url("../images/pattern.png"), -o-radial-gradient(60% 120%, circle, #dfd5a8 0%, #2f71a9 110%);
background: url("../images/pattern.png"), -ms-radial-gradient(60% 120%, circle, #dfd5a8 0%, #2f71a9 110%);
background: url("../images/pattern.png"), radial-gradient(60% 120%, circle, #dfd5a8 0%, #2f71a9 110%);

非常感谢。PS：我试图为自己申请http://modernizr.com，但我不确定它是否是连接插件的好方法.. 是否有可能只使用纯 css .. 我希望如此。

Answer 1

使用带有 alphachannel 的色彩空间，rgba或者hsla能够使渐变半透明并使用正确的顺序，它将起作用：

例子

background:radial-gradient(60% 120%, circle, rgba(223, 213, 168, .75)   0%,
                                             rgba( 47, 113, 169, .75) 110%),
           url("http://placekitten.com/g/200/300");