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

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

使用带有 alpha 通道的颜色空间，例如 rgba 或 hsla，以便能够使渐变半透明并使用正确的顺序，它会起作用：

Example

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");