CSS Farbverlauf Schachbrett Muster

Question

Ich möchte ein Schachbrettmuster mit Farbverläufen erstellen. Ich habe ein Beispiel gefunden und es an meine Bedürfnisse angepasst, aber es funktioniert nur mit -moz Präfix. Wenn ich das Präfix -moz entferne, ist das Muster völlig anders.

Wie kann ich dieses -moz Schachbrettmuster arbeiten mit vordefinierten linear-gradient?

body { 
    background-image: 
    linear-gradient(45deg, #808080 25%, transparent 25%), 
    linear-gradient(-45deg, #808080 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #808080 75%), 
    linear-gradient(-45deg, transparent 75%, #808080 75%); 

    background-size:20px 20px;  
    background-position:0 0, 10px 0, 10px -10px, 0px 10px; 
} 

Answer 1

einfach die background-position wie im folgenden Code-Schnipsel ändern Sie die gewünschte Ausgabe zu erhalten. Dies funktioniert in Firefox, Chrome, Opera, IE11 und Edge.

body { 
 
    background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%); 
 
    background-size: 20px 20px; 
 
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px; 
 
}

Das Problem scheint wegen einer Differenz in der Art und Weise zu geschehen die Winkel durch die -moz linearen Gradienten und der Standard behandelt werden. -45deg in der -moz linearen Gradient scheint 135deg in der Standard-Gradienten (, aber die Änderung des Winkels ergibt sich in einem seltsamen Punkt in der Mitte).

Die folgenden Screenshots zeigen den Unterschied (beide im letzten Firefox v44.0).

Ausgang mit -moz-linear-Gradient:

Ausgang mit einem linearen Gradienten: