CSS gradient Schachbrett-Muster
Erstellen Sie ein Schachbrett-Muster mit Farbverläufen. Ich habe ein Beispiel gefunden und es geändert, um meine Bedürfnisse, aber es funktioniert nur mit -moz
Präfix. Wenn ich entfernen Sie die -moz
Präfix, das Muster ist vollkommen anders.
Wie kann ich diese -moz
Schachbrettmuster Arbeit mit unprefixed 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;
}
- Verwenden Autoprefixer (mit npm, gulp, grunt, über Prepros 4, jedes Werkzeug wirklich) und Sie werden keine Probleme haben, mit Präfixen je. Oder anderes caniuse.com ist die Referenz für diese Art von Dingen (Suche, "gradient" und klicken Sie dann auf "alle Anzeigen (Version)" - Taste)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ändern Sie einfach die
background-position
wie in dem snippet unten, um die gewünschte Ausgabe. Dies funktioniert gut in Firefox, Chrome, Opera, IE11 und Edge.CSS:
Das problem scheint passiert zu sein, weil ein Unterschied in der Art und Weise der Winkel wird durch die
-moz
linear-gradient und die standard.-45deg
im-moz
linearer Verlauf zu sein scheint, gleich135deg
im standard-gradient (aber die änderung der Winkel führt zu einem seltsamen Punkt in der Mitte).Den screenshots unten zeigen den Unterschied (beide in der neuesten Firefox-v44.0).
Ausgabe mit -moz-linear-gradient:
- Ausgang mit linearer gradient:
Den 45deg version funktioniert gut, kann aber am Ende zeigt eine Linie zwischen den Dreiecken in verschiedenen zoom-Stufen oder auf retina-Bildschirme. Je nachdem, welche Browser Sie unterstützen müssen, Sie können auch
background-blend-mode: difference
(caniuse zeigt derzeit fast 90% Unterstützung), können Sie die Tönung der Prüfungen mit einem zusätzlichen background-image:CSS:
Diese Chrom wurde die Umsetzung für Sie bei der Eröffnung ein Bild mit Transparenz für eine Weile (obwohl Sie später entfernt werden, zu Gunsten der nur mit einem einfarbigen hintergrund).
Dank Harry für die inspiration - hier ist ein scss mixin zu tun, dass