CSS3：如何在适合跨浏览器兼容性的图像上创建线性渐变？

My issue is caused by having a background gradient on top of an image.

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

How do I add the other properties e.g. -webkit, -o, to make it work in other browsers

如何添加其他属性,例如-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

EDIT

If I add the vendor prefixes like so:

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

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');
}

It does not work

这是行不通的

4 个解决方案

#1

You can use this. JSFIDDLE

你可以用它。的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 */
}

#2

div {
  background: -webkit-linear-gradient(left,rgba(0,0,0,0.2),rgba(0,0,0,0.8)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.8)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.8)); /*Fx 3.6-15*/
  background: linear-gradient(to right,rgba(0,0,0,0.2),rgba(0,0,0,0.8)); /*Standard*/
} 

You can see full examples from w3schools. Just remember to put the standard syntax last.

你可以看到w3schools的完整例子。请记住将标准语法放在最后。

#3

Original answer

What you need are called vendor prefixes. These allow support for css3 features which are not yet applied in general accross the browsers.

您需要的是所谓的供应商前缀。这些允许支持css3功能,这些功能在浏览器中一般尚未应用。

the simple syntax is: -prefix followed by -property-name in your case it will be:

简单的语法是:-prefix后面跟-property-name,它将是:

-webkit-linear-gradient(...)
-moz-linear-gradient(...)
-ms-linear-gradient(...)
-o-linear-gradient(...)
linear-gradient(...)

webkit is for safari and chrome, moz for firefox, ms for IE and o for opera. But recently, webkit. The final one, without any prefix is for the possibility that the feature gets cross-platform support in future.

webkit用于safari和chrome,moz用于firefox,ms用于IE,o用于opera。但最近,webkit。最后一个没有任何前缀的是该功能将来可能获得跨平台支持。

---

Added after 1st comment

you need to put them with along with other css rules for the dom element, ie, if you are writing css for a div with id papaya:

你需要将它们与dom元素的其他css规则一起使用,即,如果你正在为id为木瓜的div编写css:

div#papaya{
    color: ...;
    font-size: ...;
    -webkit-linear-gradient(...);
       -moz-linear-gradient(...);
        -ms-linear-gradient(...);
         -o-linear-gradient(...);
            linear-gradient(...);
    /*any other properties*/
}

#4

This is just a shorthand way of grouping multiple background properties:

这只是分组多个背景属性的简便方法:

background: url('cats.jpg'), #000000;

which equates to

相当于

background-image: url('cats.jpg');
background-color: #000000;

What I wrote originally did not work because the browser looked at the 'background' property and couldn't understand the values I had used (the vendor prefixes).

我最初写的不起作用,因为浏览器查看了'background'属性,无法理解我使用过的值(供应商前缀)。

Unfortunately, because I was stacking a gradient over an image, the vendor prefixes could not all be included in one reference to background. So, like Vlada903 said, the vendor prefixes need to be in their own reference to background so the browser can scan each, before finding the one it is able to understand and use.

不幸的是,因为我在图像上堆叠渐变,所以供应商前缀不能全部包含在一个对背景的引用中。因此,像Vlada903所说,供应商前缀需要在他们自己的背景参考中,因此浏览器可以扫描每个,然后找到它能够理解和使用的那个。