Deseamos mostrarte la mejor información que descubrimos on line. Nosotros deseamos que te resulte de utilidad y si quieres comentarnos algo que nos pueda ayudar a perfeccionar nuestra información hazlo con total libertad.
Solución:
Solo modifica el background-position como en el fragmento a continuación para obtener el resultado requerido. Esto funciona bien en Firefox, Chrome, Opera, IE11 y 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;
El problema parece estar ocurriendo debido a una diferencia en la forma en que los ángulos son manejados por el -moz gradiente lineal y el estándar. -45deg en el -moz gradiente lineal parece ser igual a 135deg en el gradiente estándar (pero cambiar el ángulo da como resultado un punto extraño en el medio).
Las siguientes capturas de pantalla muestran la diferencia (ambas tomadas en la última versión de Firefox v44.0).
Salida con -moz-linear-gradient:
Salida con gradiente lineal:
La versión de 45 grados funciona bien, pero puede terminar mostrando una línea entre los triángulos a diferentes niveles de zoom o en las pantallas retina. Según los navegadores que necesite admitir, también puede usar background-blend-mode: difference (Caniuse actualmente muestra soporte en casi todas partes excepto IE), puede teñir los cheques usando una imagen de fondo adicional:
body
background-image: /* tint image */
linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
/* checkered effect */
linear-gradient(to right, black 50%, white 50%),
linear-gradient(to bottom, black 50%, white 50%);
background-blend-mode: normal, difference, normal;
background-size: 2em 2em;
Esta fue la implementación de Chrome para cuando abría una imagen con transparencia por un tiempo (aunque luego la eliminaron a favor de usar solo un fondo sólido).
body
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);