CSS3:如何在适合跨浏览器兼容性的图像上制作线性渐变

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

你可以

使用它。吉斯菲德尔

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 */
}

Answer 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*/
} 

您可以看到来自w3schools的完整示例。只要记住把标准语法放在最后。

Answer 3

原始答案

您需要的称为供应商前缀。这些允许支持尚未在浏览器中应用的 css3 功能。

简单的语法是：-prefix后跟-property-name在您的情况下，它将是：

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

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

---

在第一条评论之后添加

您需要将它们与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*/
}

Answer 4

这只是对多个背景属性进行分组的简写方法：

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

这相当于

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

我

最初写的内容不起作用，因为浏览器查看了"background"属性并且无法理解我使用的值（供应商前缀）。

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