Liniowy gradient i adres URL dla przeglądarki mobilnej?

Question

chciałbym mieć obraz jako tło, a także gradient liniowy CSS:

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

I dont'have problemy z przeglądarki na komputerze (Firefox 44.x, IE 10, Chrome, Safari), ale nie robi” t działa z mobilną przeglądarką (testowałem z moim iphone 5, (9.x) za pomocą safari, aplikacji firefox, chrome aplikacji).

Używam tego:

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; 

czym problem?

dziękuję i przepraszam za mój angielski :)

Answer 1

W pierwszych dniach CSS3 w wielu środowisk, problemem było to, że gradient zajmuje miejsce img tła, ale robi się rozwiązać i na mozilla-developer można znajdź przykład, taki jak twój pomysł, który działa dobrze, również mobilny.
Twoje css wygląda dobrze, chociaż możesz uruchomić go za pomocą autoprefixr, aby zaktualizować prefiksy.
Zanim zastanowimy się nad możliwością, że jeden z prefiksów zaburzy twój wyświetlacz, PIERWSZY sprawdź z telefonem funkcjonujący przykład (i oczywiście css) oraz ustaw tło-powtórzenie i położenie tła dla obrazu tła.

Answer 2

Sprawdź poniżej link jsfiddle. Na moim przykładzie, nie poprzedzone liniowego gradientu został skorygowany do ostatniego składniach: (w tym przypadku przy użyciu „do ...” dla kierunku)

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

https://jsfiddle.net/3u2Lhx6k/

bardziej szczegółowych informacji: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient.