CSS3 : How do I make a linear gradient on top of an image suitable for cross browser compatibility?

Question

我的问题是由图像顶部的背景渐变引起的。

如何添加其他属性，例如-webkit，-o，让它在其他浏览器中工作

div{
background:
linear-gradient(
rgba(0, 0, 0, 0.2), 
rgba(0, 0, 0, 0.8)
),
url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg');

}

http://jsbin.com/rovini/1/edit?html,css,output

编辑

如果我像这样添加供应商前缀:

div{
background:
-mox-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)),
-webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)),
-o-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)),
linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)),
url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg');
}

没用

Answer 1

你可以使用它。 <强> JSFIDDLE

div{
    height:100%;
    width:100%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.2)), to(rgba(0,0,0,.8))),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* Saf4+, Chrome */
    background: -webkit-linear-gradient(top, rgba(0,0,0,.2), rgba(0,0,0,.8)),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(top, rgba(0,0,0,.2), rgba(0,0,0,.8)),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* FF3.6+ */
    background: -ms-linear-gradient(top, rgba(0,0,0,.2), rgba(0,0,0,.8)),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* IE10 */
    background: -o-linear-gradient(top, rgba(0,0,0,.2), rgba(0,0,0,.8)),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* Opera 11.10+ */
    background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.8)),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* W3C */
}