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

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

使用的色彩空间与像rgba或hsla的alpha通道，以便能够使梯度半透明，并使用正确的顺序，也将努力：

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