2012-05-10 12 views
11

Neue Frage hier, aber aus irgendeinem Grund kann ich das nicht herausfinden. Ich habe das folgende CSS, das auf meinem iPhone funktioniert, aber nicht auf meinem Android. Aus dem Blick auf die jQuery Mobile Demos mit dem Android weiß ich, dass es Hintergrund Gradienten bewältigen kann. DankCSS3 Linear-Gradient funktioniert nicht auf Android.

.mydiv { 
    background: -moz-linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE; 
    background: -webkit-linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE; 
    background: linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE; 
} 

Antwort

23

Android-Browser unter 4,0, nach caniuse die alte -webkit Syntax verwendet:

background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a7cfdf), color-stop(100%, #23538a)); 

Bonus: Ich empfehle Ihnen, so etwas wie LESS oder Compass/SASS verwenden, wäre es Ihnen, alle sparen Diese Arbeit http://compass-style.org/

+0

Was ist das für Android 2.2? Jede Variante hat versucht, zu arbeiten. Danke – Evans

+0

Welche Varianten hast du probiert? Hast du es probiert "background: -webkit-gradient (linear, links oben, links unten, color-stop (0%, # 000000), color-stop (100%, #ffffff));" ? – Cmorales

+0

Ich habe es selbst getestet und nur die alte Syntax funktioniert. Ich habe meine Antwort bearbeitet. – Cmorales

1
background-color:#666633; //fallback 
background:-webkit-linear-gradient(top, #666633, #333300); //webkit 
background:-moz-linear- gradient(top, #666633, #333300) //mozilla 

Dies funktioniert.

+0

Ich bekomme eine solide Farbe, aber laut dieser Website http://www.impressivewebs.com/css3-line-gradient-syntax/ "Mobile Unterstützung für lineare Farbverläufe umfasst: iOS 3.2 +, Opera Mini 5+, Opera Mobile 10+ und Android Browser 2.1+. " und mein Android ist 2.2, also sollte es funktionieren. – Evans

+0

Das ist seltsam. Funktioniert auf meinem GNex mit 4.0. Es ist wirklich schwer, in diesen Tagen mit der CSS3-Syntax Schritt zu halten. –

+0

Vielleicht verwenden die Demos von jQuery Mobile Hintergrundbilder, aber ohne jede Art von Firebug-Typ ist es schwer zu wissen. – Evans

3

Ich bin auf diese Frage gestoßen, weil ich Probleme mit linearen Verläufen auf einem Android 2.2 hatte. Das Problem wurde unsere linearen Gradienten wurden mit dem neuen Winkelsystem

-webkit-linear-gradient(to top #000000 0%, #ffffff 100%) 

jedoch ältere Android Unterstützung des alte Winkelsystem (ohne -). Das Äquivalent des obigen Gradienten wäre

-webkit-linear-gradient(bottom #000000 0%, #ffffff 100%) 
+2

Schön, arbeitete für mich. – iConnor

Verwandte Themen