移动浏览器的线性渐变和 url-图像？

Question

我想要一个图像作为背景，还有一个 CSS 线性渐变 :

background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);

我在桌面浏览器（Firefox 44.x；IE 10；Chrome；Safari）上没有问题，但在移动浏览器上不起作用（我用 iphone 5、(9.x) 与 safari、应用程序 firefox、应用程序 chrome)。

我用这个：

background-image: url("/site/grigliatrasparente.png"), -moz-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -o-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -ms-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#404040), color-stop(2%,#dfbb80),color-stop(98%,#dfbb80),color-stop(100%,#404040));
background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#404040, endColorstr=#dfbb80);
background-color: #dfbb80;

有什么问题？

非常感谢，对不起我的英语:)

Answer 1

在CSS3的多背景早期，问题是渐变代替了背景img，但是事情得到解决，在mozilla-developer你可以找到一个例子喜欢你的想法，很好用，也可以移动。
您的 css 看起来不错，尽管您可以运行它通过 autoprefixr 更新前缀。
在考虑可能其中一个前缀干扰您的显示的可能性之前，首先检查您的 phone 功能示例（当然还有 css）并设置背景重复和背景位置背景图片。

Answer 2

检查下面的 jsfiddle link。在我的示例中，非前缀线性渐变已更正为最后一个语法：（在本例中使用 'to ...' 作为方向）

background-image: url(http://placehold.it/350x150), linear-gradient(to right, #404040 0%, #dfbb80 2%, #dfbb80 98%, #404040 100%);

https://jsfiddle.net/3u2Lhx6k/

更详细的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient.

移动浏览器的线性渐变和 url-图像？

Linear gradient and url-image for browser mobile?

css

mobile-browser

autoprefixer

css-gradients