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 {
  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 2

原始答案

您需要的是vendor prefixes。这些允许支持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 3

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

Answer 4

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

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

等同于

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

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

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

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

4 个答案:

原始答案

在第一次评论后添加