Линейный градиент и url-изображение для браузера mobile?

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, 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) и установите background-repeat и background-position для background-image.

Answer 2

Проверьте ниже ссылку jsfiddle. В моём примере линейный градиент без префикса был исправлен в соответствии с последним синтаксисом: (в данном случае, используя "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.