浏览器移动的线性渐变和网址图片？

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,app firefox,app铬).

我用这个:

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 运行它来更新前缀。
在考虑某个前缀可能会干扰您的显示之前，请首先使用手机检查功能示例（当然还有 CSS），并为背景图像设置背景重复和背景位置。