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

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

1 个答案: